IE9 HTML5 videó beágyazás

A hangfájlokhoz hasonlóan lehetőség van az egyszerű videólejátszásra is at IE9-ben mosr debütáló HTML5-ben. Videót beágyazni a video tag segítségével lehet. A videólejátszó rendelkezhet kezelőszervekkel,  meg lehet adni neki fallback lehetőségeket és javascriptből is vezérelhető. Kezdjük a legegyszerűbb esettel:

<video src="video.mp4">

Ez létrehoz egy videólejátszót és megpróbálja lejátszani a video.mp4-et. Ez vagy sikérül, vagy nem. Nézzük hogyan adhatunk meg egy szöveges fallback lehetőséget, ha a böngésző valamiért nem támogatná a videólejátszást:

<video src="video.mp4">
A böngésződ nem támogatja a video taget.
</video>

Az is lehet, hogy csak a kodekekkel van baj, és valamilyen másik formátumot le tudna játszani a böngésző. Ezért több videót is meg lehet adni egyetlen playernek, ami  sorban az első olyat fogja lejátszani, amit le is tud:

<video>
      <source src="video.mp4" 
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="video.ogv" 
        type='video/ogg; codecs="theora, vorbis"'>

A video tag támogatja a controls és loop attribútumokat, az audio taghez hasonlóan. Javascriptből pedig elindítható és megállítható:

<video class="video" loop controls onmouseover="this.play();" onmouseout="this.pause();">
      <source src="video.mp4" 
        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="video.ogv" 
        type='video/ogg; codecs="theora, vorbis"'>



Dávid Zoltán

Dávid Zoltán Mérnök Informatikusként végeztem a BME-n, jelenleg webfejlesztéssel és gépi tanulással foglalkozom.

2010.12.11. 18:50:36 | Permalink | Hozzászólások: 0 | Tárgyszavak: , ,


  • Amikor az UpdatePanel nem működik

    Dávid Zoltán Egyik webalkalmazás kezdőlapján több (három) lapozható lista is van. Mindegyiket LinkView-val valósítottuk meg. Felmerült az igény, hogy ezek a listák egymástól és az oldaltól függetlenül, aszinkron módon lapozhatóak legyenek. Elvileg erre való az UpdatePanel. Mindhárom listát be is burkoltam egy-egy UpdatePanelbe, ekkor jött a meglepetés: két lista szépen az UpdatePanelen belül lapozódott csak, míg a harmadik minden esetben teljes postbacket csinált és újratöltötte a teljes oldalt. Kicsit mérgelődtem és kattintgattam, ezalatt “elromlott” egy újabb lista is: így már kettőből csak egy volt hajlandó aszinkron újratöltődésre. Mindeközben a TFS-ben az oldalak ID-talanítása... Tovább »
  • Active Directory jelszó cserélése C# kódból

    Dávid Zoltán Sokadjára futok bele olyan feladatba, hogy Active Directory felhasználókat kell kezelnem .NET kódból. A korábbi esetekből általában csak annyira emlékszem, hogy mindent sikerült megcsinálni, de sokat szöszöltem vele. Ennek vége: mostantól minden Active Directory feladatot és a hozzá tartozó megoldást lebloggolok, hogy a jövőben vissza tudjam őket keresni. A mai megoldandó feladat. Tovább »


Írja meg Ön is véleményét!


Hozzászólásokat csak regisztrált, bejelentkezett felhasználóktól tudunk elfogadni!

Hozzászólások