In de eerste van zijn blogs voor PC Pro , webontwikkelaar Ian Devlin laat zien hoe u video in uw website kunt insluiten met HTML5
hoe de gebruikersnaam van League of Legends te veranderen
Waarschijnlijk de grootste en meest besproken functie van HTML5 is embedded video. Momenteel is de enige methode om video-inhoud aan uw website toe te voegen, een plug-in van een derde partij, zoals Flash, QuickTime of RealPlayer. Met de opkomst van HTML5 en het video-element zal dit allemaal veranderen, waarbij video-ondersteuning wordt afgehandeld door de webbrowser, waardoor ondersteuning van derden overbodig wordt.
Diverse webbrowsers bieden al ondersteuning voor HTML5. Hier gaan we onthullen hoe u plug-in-vrije video in uw site kunt insluiten en met welke problemen u te maken zult krijgen.
Bestandstypen en browsercompatibiliteit
Om te beginnen kijken we kort naar de verschillende videobestandstypen die worden ondersteund in HTML5. Dit zijn Theora OGG en H.264 (.mp4). Verschillende browsers ondersteunen verschillende typen, en sommige ondersteunen helemaal geen. De volgende tabel geeft dit aan:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | X |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | X | ✓ |
| Opera 10.5+ | ✓ | X |
| Internet Explorer 8 | X | X |
| Internet Explorer 9 | X | ✓ |
| iPhone | X | ✓ |
| Android | X | ✓ |
Codecs en andere technische problemen
HTML5 specificeert zelf geen videocodec die moet worden gebruikt, en dit heeft tot argumenten geleid welke dat wel is het beste om te gebruiken voor internet . Dus om alle browsers te dekken, moeten we beide codecs ondersteunen.
En dan is er natuurlijk Internet Explorer. Op dit moment ondersteunt geen van de uitgebrachte versies van Internet Explorer het video-element en is er nog steeds een plug-in nodig om video af te spelen. Dit zal veranderen met de release van Internet Explorer 9 (waarschijnlijk begin volgend jaar), wanneer H.264 zal worden ondersteund, samen met vele andere HTML5-goodies.
Als u zich afvraagt hoe u uw videobestanden naar OGG kunt converteren (u kunt meer lezen over het Theora OGG-type op de TheoraCookbook ) bestanden met behulp van de Miro Video Converter .
Ga voor meer diepgaande informatie over het video-element en de codecs naar het duik in html5: video op internet door Mark Pilgrim.
HTML5-code
Nu gaan we verder met de eigenlijke HTML5-code en hoe we het ding kunnen laten werken. HTML5 biedt ons twee nieuwe elementen die we kunnen gebruiken om video aan onze webpagina's toe te voegen: de element, dat we al hebben genoemd, en het element. Laten we ze allemaal om beurten bekijken.
Het element
Het video-element kan de volgende attributen hebben:
| Attribuut | Omschrijving |
|---|---|
| src | een geldige URL naar het videobestand zelf |
| automatisch afspelen | een boolean die aangeeft of de video automatisch moet worden afgespeeld |
| bedieningselementen | een boolean die aangeeft dat de standaard mediabediening door de browser moet worden weergegeven |
| lus | een boolean die aangeeft of de video herhaaldelijk moet worden afgespeeld |
| preload | geeft aan de browser aan of preventief downloaden van de video zelf vereist is, of dat alleen metadata voldoende is. Mogelijke waarden zijn:
|
| poster | de URL naar een afbeeldingsbestand dat moet worden weergegeven wanneer er geen videogegevens beschikbaar zijn |
| breedte | de breedte van de video, in CSS-pixels |
| hoogte | de hoogte van de video, in CSS-pixels |
Hieruit blijkt hoe gemakkelijk het is om een OGG-video in uw website in te sluiten met alleen het video-element:
Dat is echt alles wat er is.
Elke browser die het Theora OGG-formaat ondersteunt, zou nu met succes uw video zonder meer moeten weergeven en afspelen. Zo eenvoudig is het natuurlijk niet, want zoals we in de bovenstaande tabel hebben gezien, zou de code alleen werken in Firefox, Chrome en Opera. We moeten dus ook terugvallen op H.264. Dit kan worden bereikt met de element, waarmee we meerdere mediabronnen voor het video-element kunnen definiëren.
hoe u uw Google-zoekgeschiedenis kunt bekijken
Het element
Het bronelement heeft de volgende attributen:
| Attribuut | Omschrijving |
|---|---|
| src | een geldige URL naar het mediabestand (in dit geval video) zelf |
| type | het type mediabestand dat een Mime type , b.v. type='video/ogg' geeft aan dat het een Theora OGG-video is, en je kunt ook de MIME-codec leveren om de browser te helpen beslissen hoe de video moet worden afgespeeld door type='video/ogg; codecs='theora, vorbis' te gebruiken. |
| voor de helft | geeft het bedoelde mediatype van de mediabron aan en moet geldig zijn media-vraag , b.v. media='handheld' geeft aan dat de video geschikt is voor draagbare apparaten of media='all and (min-device-height:720px)' wat aangeeft dat de video geschikt is voor schermen van 720 pixels of meer. |
Let op: het bronelement is ongeldig en heeft een start-tag maar geen afsluitende tag
Het handigste van het bronelement is dat we het kunnen gebruiken om de verschillende bestandstypen te stapelen, zodat de browser ze elk om de beurt kan proberen totdat hij er een vindt die kan worden afgespeeld.
Gebruiken en samen
Om video's in de verschillende typen binnen het video-element te stapelen, voeren we de code als volgt in:
Your browser does not support the video element.
De bovenstaande code werkt nu in alle browsers behalve Internet Explorer, die het bovenstaande bericht zal weergeven.
Je kunt dit zelf testen door de HTML5 Test Video-pagina te bekijken, die een voorbeeldvideo bevat van een vlinder in zowel Theora OGG- als MP4-indeling, dus als je deze bekijkt in Firefox, Chrome, Safari, Opera of op de iPhone of een Android-handset, u zou deze moeten kunnen bekijken.
De scherpe messen onder jullie zullen nu merken dat we kunnen profiteren van deze stapeling en een fallback naar Flash (of een andere plug-in) onderaan hebben in plaats van een sorry dat je dit videoboodschap niet kunt zien, door de volgende code te gebruiken :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Conclusie
Zoals met de meeste HTML5-elementen, is de browserondersteuning voor de bron- en video-elementen momenteel fragmentarisch. Er is momenteel ook een grote discussie gaande over de vraag of het bronelement het gebruik van Flash als de meest populaire methode om video-inhoud aan websites toe te voegen, zal beëindigen. Ik weet niet zeker of het Flash volledig zal doden, maar toch denk ik dat het redelijk is om te zeggen dat het hier is om te blijven en dat het webontwikkelaars een schonere, eenvoudigere benadering zal bieden voor het insluiten van video.
