HTML5-video's 10 dingen die ontwerpers moeten weten

De HTML5-revolutie is een boeiend webontwerpers uit alle delen van de wereld. De nieuwe specificaties ondersteunen tientallen elementen en attributen voor het bouwen van semantische websites. Deze nieuwe functies omvatten multimediatags voor audio- en videoformaten.

In de afgelopen jaren was een op Flash gebaseerde mediaspeler ruim voldoende om te streamen op het web en deze technologie is nog steeds nodig om oudere browsers te ondersteunen. Maar gelukkig zijn moderne standaarden vergevorderd en de opname van HTML5-video opent deuren voor tientallen nieuwe mogelijkheden.

In deze handleiding wil ik een inleiding tot HTML5-video voor het web aanbieden. Het zal enige oefening kosten om de native in-browser speler en al zijn functionaliteit te begrijpen. En de beste manier om bekend te raken, is door eerst in het hoofd te duiken!

1. Typen media

Wanneer u met een Flash-videospeler werkt, is het maar al te gewoon om alle videoformaten in FLV te combineren. Hoewel dit werkt, kunnen de meeste FLV-bestanden de kwaliteit niet behouden in de buurt van de meer geavanceerde bestandsindelingen / codecs. Er zijn 3 belangrijke videotypes die worden ondersteund door HTML5: MP4, WebM en Ogg / Ogv. Het MPEG-4-bestandstype is meestal gecodeerd in H.264, waardoor afspelen in Flash-spelers van derden mogelijk is. Dit betekent dat u geen .flv-videokopie hoeft te houden om een ​​fallback-methode te ondersteunen! WebM en Ogg zijn twee veel nieuwere bestandstypes met betrekking tot HTML5-video. Ogg gebruikt de Theora-codering die is gebaseerd op de open-source standaard audiobestandsindeling. Deze kunnen worden opgeslagen met een .ogg- of .ogv-extensie.

WebM is een project dat wordt uitgezet door Google en waarover u meer kunt lezen op de website van het WebM Project. Het formaat wordt al ondersteund door Opera, Google Chrome, Firefox 4+ en meest recent Internet Explorer 9. Het is nog steeds onbekend bij de meeste webprofessionals, maar WebM is het toonaangevende videomediumformaat in de toekomst van webvideo.

2. Browserondersteuning

Welke van deze bestandstypen heeft u nodig voor uw website? In het ideale geval zouden alle 3 geweldig zijn omdat ze het volledige ondersteuningsspectrum bieden. Toch is dit niet realistisch, en in feite kun je alle bases met slechts twee van hen bestrijken. Hier is een overzicht van wat werkt voor elke browser:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - Geen HTML5, alleen Flash!

Als je dit onthoud, heb ik eerder gezegd dat de meeste flashvideospelers MP4-bestanden ondersteunen, zolang ze maar zijn gecodeerd in H.264. Als zodanig zal elk van deze browsers MP4 + Flash insluiten als een laatste redmiddel. Dit betekent dat u alleen hoeft te maken twee verschillende video-indelingen om alle browsers te ondersteunen. MP4 voor Safari / IE9 en een keuze tussen WebM of Ogg voor de rest.

Naar mijn mening beveel ik ten zeerste aan om met het WebM-formaat te blijven werken. Het heeft een aantal grote namen achter het project (namelijk Google) en heeft veel grip opgedaan in de HTML5-community. Ogg / Ogv wordt ondersteund, maar zal hoogstwaarschijnlijk minder populair worden in de kleinere bestandsgroottes van WebM. Je kunt een gerelateerd stuk over de toekomst van video op internet lezen, geschreven door Sean Golliher.

3. Eenvoudige HTML5-video's insluiten

Laten we nu eens kijken naar de syntaxis die nodig is om een ​​voorbeeldcode in te voegen. We hebben alleen de HTML5-videotag nodig om naar elke film-URL te verwijzen.

Let op de controls en automatisch afspelen attributen hoeven niet te worden ingesteld met waarden. Ik heb ook een poster kenmerk dat een afbeelding vooraf laadt op de videospeler voordat deze wordt gestreamd. Dit is een veelvoorkomende preview met veel webspelers.

We bieden zowel MP4- als WebM-indelingen intern voor het video-element. Als geen van beide kan worden geladen, geven we een fout weer voor de gebruiker om zijn of haar browser bij te werken.

4. Aanbieden van een flash-fallback

Het bovenstaande voorbeeld is perfect voor alle webbrowsers die aan de standaarden voldoen. Maar we moeten ook bedenken dat de wereld niet altijd in de voorhoede van de technologie staat. We moeten gebruikers ondersteunen in oudere versies van Safari, Mozilla Firefox en vooral Internet Explorer.

De beste manier om dit te bereiken is via een Flash fallback-speler. Deze kunnen worden toegevoegd met behulp van de embed of voorwerp tags om naar een .swf-bestand van derden te verwijzen. JW Player en Flowplayer zijn twee gratis open source-oplossingen die u kunt overwegen. Maar kijk ook eens naar premium videospelers op ActiveDen die zo goedkoop kunnen zijn als $ 15- $ 20.

Laten we nu de bovenstaande code aanpassen om een ​​fallback Flash-speler toe te voegen die bijna elke browser ondersteunt die bestaat.

5. Ondersteuning voor mobiele apparaten

Over dit onderwerp wordt nog lang gedebatteerd, omdat de mobiele industrie nog zo jong is. Apple kwam met ondersteuning voor MP4 op Mac- en iOS-apparaten. Dit betekent dat je .mp4 videobestanden native kunt streamen op je iPad, iPhone of iPod Touch in de standaard video-gebruikersinterface. Dit dekt veel van het marktaandeel.

Onlangs hadden Android-apparaten het moeilijk om op hetzelfde ondersteuningsniveau te komen. Google heeft echter eindelijk de .mp4-webstreaming geïmplementeerd, die nu profiteert van bijna alle mobiele gebruikers. En aangezien Flash hier geen optie is, is MP4 de beste beschikbare oplossing. Dit is waarom je de .mp4-code eerst wilt insluiten, zodat iOS-apparaten het bestand onmiddellijk kunnen herkennen.

6. Safari-gebruikersagent

Een bug die moet worden genoemd, is een bestaande tussen Flash-spelers en native HTML5 .mp4-streaming op Safari. Aangezien de browser beide bestanden kan ondersteunen, kunt u problemen ondervinden bij het verkrijgen van de HTML5-videostream in plaats van Flash. Maar dankzij deze geweldige blogpost op TUAW is het eenvoudig om je browser voor surfgebruikers te wijzigen.

Hierdoor wordt uw webpagina gedwongen om de browser te herkennen als actief op een ander apparaat. Hoogstwaarschijnlijk kiest u voor iPad, die GEEN Flash-weergave ondersteunt. Dit is het enige belangrijke probleem dat u tegen kunt komen bij het testen van de MP4 native & flash-afspeelmethoden.

7. Beheer spelerbesturing

Geloof het of niet, er zijn ook methoden die je kunt gebruiken om de besturing van de HTML5-videospeler te manipuleren. Het kan allemaal worden gedaan in JavaScript door te trekken uit een reeks open methoden. Er zijn veel te veel om hier op te sommen, maar probeer door de W3C media element-documenten te bladeren voor meer details.

Om u een algemeen idee te geven, heeft de Opera Dev-blog een aantal korte tutorials geplaatst die geweldig zijn voor beginners. Zelfs als je nog nooit JavaScript of jQuery hebt opgepikt, is het nog steeds eenvoudig om ermee te beginnen. U kunt een beroep doen op specifieke kenmerken van de videomedia, zoals gedempt of huidige tijd. Vervolgens kunt u acties uitvoeren (de achtergrond dimmen, advertenties weergeven) op basis van deze criteria door de DOM in jQuery te manipuleren.

Dezelfde ontwikkelaar in het Opera-artikel biedt een werkende demo van hun script-videospeler. De mogelijkheid om uw eigen UI-besturingselementen aan te passen is uitstekend. Het laat alleen maar zien hoe krachtig HTML5-video's worden.

8. Videoformaatconversie

Dit is een ander groot probleem dat waarschijnlijk minder technisch onderlegde mensen zal verwarren. Wilt u gewoon uw website laten opstralen en streamen en nu heeft u te maken met het converteren van video's? Nou, het is eigenlijk niet zo moeilijk.

Om MP4 aan te pakken, wat uw grootste prioriteit is, kunt u HandBrake gebruiken, een gratis open source-oplossing die op alle drie de hoofdsystemen draait. Het ondersteunt H.264 samen met een paar andere codecs waardoor dit de beste optie is voor freebie-gebruikers. Als je het geld hebt om uit te geven, moet ik Xilisoft converter aanbevelen die in de Mac App Store staat voor slechts een $ 40 levenslange licentie.

Het lijkt erop dat de WebM-route het leven een stuk eenvoudiger maakt. Miro Video Converter is een gratis tool voor Windows en OS X die hoogwaardige WebM-bestanden produceert. Het kan ook de Ogg Theora-codering uitvoeren, die ook van zeer goede kwaliteit komt.

9. Een webplayer bouwen

Video-indelingen met HTML5-specificaties zijn nog nieuw voor ontwikkelaars. Er zijn open protocollen die wachten om te worden afgespeeld om aangepaste besturingselementen, schuifregelaars, pictogrammen voor afspelen / pauze, enz. Toe te staan. Als je moedig bent, bekijk dan deze tutorial over hoe je je eigen HTML5-speler kunt maken (gepubliceerd op Splashnology).

De code is een beetje intens voor nieuwkomers omdat het geavanceerde CSS-targeting en een beetje formeel jQuery vereist. Er zijn nog andere frameworks waar je op kunt bouwen die al een aangepast spelersontwerp bieden. Op dezelfde manier is deze diavoorstelling een geweldige introductie tot het bouwen van een HTML5-videospeler.

Een HTML5-videospeler bouwen

10. VideoJS-bibliotheek

VideoJS is waarschijnlijk mijn favoriete oplossing voor HTML5-videospelers. Het enige dat u nodig hebt, is hun zelfgeboekte JavaScript- en CSS-stylesheet ergens in uw document. Vervolgens schrijft u de standaard HTML5-videocode met enkele aanvullende klassen voor skinning. Ik heb hun voorbeeldcode hieronder toegevoegd:

Als u toevallig een WordPress-blog uitvoert, kunt u ook hun aangepaste WP-plug-in proberen. Het bevat automatisch de bibliotheek js / css op pagina's waarop u HTML5-video weergeeft. En u kunt dit doen vanuit elke bericht- of pagina-editor met behulp van shortcodes (zie hier).

Conclusie

Ik hoop dat deze inleidende gids je interesse in de toekomst van webvideo kan aanwakkeren. Nu steeds meer gebruikers mobiel worden, is het belangrijk dat HTML5-standaarden worden goedgekeurd voor dit soort media. Het web moet eenvoudiger worden gemaakt, zodat ontwikkelaars sneller volledig ondersteunde oplossingen kunnen produceren. We horen graag uw ideeën en suggesties voor de toekomst van HTML5-video. Als je wilt delen, kun je een reactie achterlaten in het gedeelte met de berichten hieronder.