De <video> tag gebruiken met fallback

Als je al eerder posts op mijn blog hebt gelezen, heb je misschien opgemerkt dat ik recentelijk voor video’s de HTML5 variant gebruik. (Als je het niet hebt gezien heb je waarschijnlijk geen browser die HTML5 ondersteund, dus vlug Internet Explorer 9 installeren :)). Ik kwam de constructie tegen op Channel9 en heb die verder toegepast. Ik dacht dat het misschien handig was om uit te leggen hoe het werkt.

In HTML5 is er nu de <video> tag om video’s te tonen. Daar zitten nog wel wat restricties aan. Zo moet de browser HTML5 ondersteunen en moet door de browser of het operating system de aangeboden codecs (video-formaten) ondersteunen. De simpele vorm hiervan is als volgt:

<video width="400"    

    height="300"    

    src="video.mp4"    

    poster="frame.png"    

    autoplay    

    controls    

    loop>    

</video>

De src property verwijst naar een video-file op een webserver. Je kan dit ook een een <source> tag plaatsen binnen de <video> tag. Er kunnen zelfs meerdere <source> tags worden opgenomen, wat door de browser gebruikt wordt om een optie te vinden die ondersteund wordt. Zo kan je verschillende codecs aanbieden. De meest gebruikte codec is H.264, maar er wordt ook wel gebruik gemaakt van VC-1, Ogg Vorbis en WebM.

De video-tag heeft een soort ingebouwd ‘fallback’ mechanisme. Hij begint bovenaan of dat een optie is die getoond kan worden. Zo niet wordt de volgende geprobeerd, enzovoort. Het mooie van deze constructie is dat je ook een ander stuk HTML kan opnemen als fallback.

Hier een voorbeeld van een fallback zoals die op Channel 9 wordt aangeboden zoals ik die in een eerdere post heb gebruikt. De fallback is een object-tag met een Silverlight applicatie die naar de smooth stream verwijst.

<video poster="http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_512_ch9.jpg" controls="">

    <source src="http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_low_ch9.mp4">

    <object data="data:application/x-silverlight-2," width="512" type="application/x-silverlight-2" height="288">

        <param name="minRuntimeVersion" value="4.0.50401.0">

        <param name="source" value="http://channel9.msdn.com/scripts/Channel9.xap?v=1.7">

        <param name="initParams" value="mediaurl=http://smooth.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty.ism/manifest,thumbnail=http://media.ch9.ms/ch9/0e10/8f3dad24-e925-4494-aabd-9f3d01330e10/MCTSurfacePatty_512_ch9.jpg,deliverymethod=adaptivestreaming,autoplay=false,entryid=8f3dad24e9254494aabd9f3d01330e10">

    </object>

</video>

In een andere post heb ik eenzelfde constructie gebruikt in combinatie met een YouTube embedded video als fallback. De fallback zit in dit geval in een iframe-tag.

<video poster="http://blogs.microsoft.nl/blogs/ux/win8-metro-ui.jpg" controls="">

    <source src="http://media.ch9.ms/ch9/cda16b03-c463-47e7-b604-9ef5011c5b25/Demo.mp4">

    <iframe height="345" src="http://www.youtube.com/embed/p92QfWOw88I?rel=0" 

        frameBorder="0" width="560" allowfullscreen="allowfullscreen">

    </iframe>

</video>

Op zich werkt het best aardig zo, maar er zijn zoals altijd voor- en nadelen. Een HTML5 video kan namelijk niet fullscreen worden gemaakt bijvoorbeeld. Daarom zet ik er ook vaak een link bij, zodat iemand de keuze kan maken om het in een ander formaat (Silverlight of Flash) kan zien waarbij fullscreen wel ondersteund wordt.

Als je het verschil in ervaring wil testen in Internet Explorer 9, open dan de Developer Tools in IE (F12) en selecteer Internet Explorer 7 om te zien hoe de pagina werkt in een niet-HTML5 browser.

En eigenlijk moet ik een stukje HTML eromheen zetten waarbij de gebruiker ook zelf kan kiezen om af te wijken van de standaard aangeboden oplossing. Smooth streaming in Silverlight bijvoorbeeld levert over het algemeen een betere kwaliteit en ervaring.

En nu maar hopen dat de HTML5 standaard rond video en audio zich ontwikkeld zodat ook DRM en (smooth) streaming ondersteund kunnen worden. Maar ja, je moet altijd wat te wensen hebben.