HTML5 Audio – Video

<video>

A HTML5 egyik legjobban várt hozománya (a sok közül) a <video> és <audio> elemek pluginek nélküli támogatása. Korábban a weboldalakba ágyazott videókhooz szükségünk volt külső fejlesztésű bővítményekre (plug-in), pl. Adobe Flash. A történet pikantériája az, hogy a különböző böngészők, más és más videó és audio kódolási eljárásokat támogatnak, aminek hátterében főként az EU és az USA közötti szabadalmi problémák állnak. Az elem támogatása már szinte az összes modern böngészőben megtalálható, Ogg, WebM és MPEG H.264 AAC formátumban. Lássunk egy kis kitérőt hogy feltérképezzük ki mit támogat.

WebM

A WebM Project egy a Google által támogatott projekt, aminek célja egy jogdíjmentes videó formátum létrehozása, főként a HTML5-ös videolejátszás céljára. Lássunk néhány fontos információt róla:

Fájlkiterjesztés .webm
Mime típus video/webm
audio/webm
Fejlesztő Google
Formátum típusa médiakonténer
Konténerformátuma ennek VP8 (videó)
Vorbis (audió)
Weboldal http://www.webmproject.org

A WebM előnye, hogy jogdíjmentes, így bárki számára elérhető. Jelenleg az Opera, Safari és a Chrome is támogatja, hellyel-közzel a Firefox, valamint addon-ok segítségével megoldott a használata Internet Explorer alatt is. Mime típusként ismerik és így használjuk:

  • video / webm – A WebM médiafájl tartalmazó videó (és esetleg hang).
  • audio / webm – A WebM médiafájl csak hangot tartalmaz.

Ogg Theora Vorbis

A Theora egy nyílt, jogdíjmentes videó formátum , amit a Xiph.org Alapítvány fejleszt az Ogg projektjük keretében.

Fájlkiterjesztés .ogv, .ogg
Mime típus application/ogg video/ogg audio/ogg
Fejlesztő Xiph.org Foundation
Formátum típusa médiakonténer
Konténerformátuma ennek Vorbis, Theora,
Weboldal http://wiki.xiph.org/index.php/Main_Page

Jelenleg a Firefox, Opera és a Chrome is támogatja, valamint addon-ok segítségével megoldott a használata Safari alatt is, de az Internet Explorer jelenleg nem támogatja. A böngészők Mime típusként ismerik és így használjuk:

  • audio/ogg .oga
  • video/ogg .ogv
  • application/ogg .ogg

H.264 MPEG (MP3 vagy AAC)

Az MPEG konténer formátum a H.264 videó codecből-és az AAC audio, vagy az MP3 audio codecből áll. Jelenleg nem jogdíjmentes formátum, ezért várhatóan ezzel még valamit csinálni fognak a szabványban, ezért nem írok róla részletesen, csak említés szinte. Jelenleg csak az Internet Explorer,Chrome és a Safari támogatja, a többi böngésző nem.

  • audio /mp3
  • video/mp4

Az ördögi kör

Öröm az ürömben, hogy a <video> elemet úgy határozta meg a HTML5, hogy több videofájlt is megadhatunk és a böngészők maguk választhatnak közülük. Tehát összegezve, ahhoz, hogy minden felhasználónknak egységes élményt tudjunk biztosítani és elkerüljük az elégedetlen felhasználók tömegeit, a következő folyamatot érdemes követnünk:

  1. Készítünk egy Ogg változatot, Theora-videosávból és Vorbis audiosávból. (Firefox addon: firefogg)
  2. Készítünk egy másikat, WebM (VP8 + Vorbis) (Firefox addon: firefogg) – De tényleg ennyire jó a firefogg 🙂
  3. Készítünk még egy, MP4, H.264 Baseline videosávból és AAC audiosávból álló változatot. (http://www.szoftverbazis.hu/szoftver/handbrake-v0-9-3-TP13.html)
  4. Mindhárom videofájlra hivatkozunk egy <video> elemmel és esetleg Flash alapú videolejátszási lehetőséget is biztosítunk.

Igen, sajnos jelenleg csak így működhet normálisan. Szörnyű és felesleges körök ezek, de a “nagyok” egyelőre még nem egyeztek meg a szabványok tengerében, hogy hol kössenek ki. Mi felhasználók pedig hajózhatunk és nagy eséllyel el is fogunk süllyedni benne. A fenti programok, addon-ok működéséről szívesen írok igény esetén, jelezzétek e-mailban.

A kód

a <video> elem használata a következő:

<video width="320" height="240" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
A böngésződ nem támogatja a video elemet.
</video>

Ahogy látható használtam egy controls paramétert is. Nézzük milyen paraméterezési lehetőségeink vannak még:

  • width – videó ablak szélessége
  • height – videó ablak magassága
  • controls – irányító gombok megjelenítése
  • autoplay – automatikusan elindítja a videót
  • loop – a videó végtelenített lejátszása
  • muted – hang elnémítása
  • poster– egy képet tehetünk be, amíg rá nem kattintanak a play gombra, addig az látható

    poster

    poster

  • preload – a videót az oldallal együtt betölti
  • src – A forrásfájl helyét adhatjuk meg vele

Nézzünk egy konkrét példát erre. Itt betesszük mind a három videó formátumot, amit különböző böngészőkben megtekintve élvezhetünk is, valamint alkalmazok poster-t is.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Video tutorial</title>

<style>
video {
width: 480px;
height: 320px;
border: 1px black;
}

.video-container {
display: inline-block;
text-align: center;
}

p {
font: 16px Arial;
}
</style>
</head>
<body>
<div>
<p>.mp4</p>
<video poster="https://html5.ugyesen.com/html5factory/12/video/poster.png" controls>
<source src="https://html5.ugyesen.com/html5factory/12/video/h264/Mylo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
</div>
<div>
<p>.ogv</p>
<video poster="https://html5.ugyesen.com/html5factory/12/video/poster.png" controls>
<source src="https://html5.ugyesen.com/html5factory/12/video/ogg/Mylo.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
<div>
<p>.webm</p>
<video poster="https://html5.ugyesen.com/html5factory/12/video/poster.png" controls>
<source src="https://html5.ugyesen.com/html5factory/12/video/webm/Mylo.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
</body>
</html>

A példa itt megtekinthető.

<audio>

A hangfájlok esetében valamivel letisztultabb a zűrzavar a HTML5 háza táján. Mivel összesen két formátum került eddig a támogatottak közé (talán egyiket sem kell részletesebben bemutatni).

  • audio/ogg
  • audio/mp3

Nézzük milyen paraméterezéssel láthatjuk el az <audio> tag-et:

  • autoplay – automatikus lejátszás
  • preload – az audio letöltése az oldal betöltésével egyidejűleg
  • controls – a lejátszáshoz tartozó gombok megjelenítése
  • src – forrásfájl helyének meghatározásához
  • loop – végtelenített lejátszás
  • autobuffer – automatikus bufferelés az elindulás után

Az <audio> tag használata:

<audio width="300" height="32" controls="controls">
<source src="dal.ogg" type="audio/ogg" />
<source src="dal.mp3" type="audio/mp3" />

   A böngésződ nem támogatja az audio elemet.
 </audio>

Nézzünk egy egyszerű példát.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Audio tutorial</title>
</head>
<body>

<audio id="audio_with_controls" controls autobuffer>
<source src="https://html5.ugyesen.com/html5factory/12/audio/mp3/champions.mp3" type="audio/mpeg" />
<source src="https://html5.ugyesen.com/html5factory/12/audio/ogg/champions.ogg" type="audio/ogg" />
Audio elem nem támogatott
</audio>

</body>
</html>

A példa itt meghallgatható.

A példánkat felturbózhatjuk egy kis JavaScript segítségével, extra gombokkal. Nézzünk erre is egy példát.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>HTML5 Audio tutorial</title>
</head>
<body>

<audio id="audio_with_controls" controls autobuffer>
<source src="https://html5.ugyesen.com/html5factory/12/audio/mp3/champions.mp3" type="audio/mpeg" />
<source src="https://html5.ugyesen.com/html5factory/12/audio/ogg/champions.ogg" type="audio/ogg" />
Audio elem nem támogatott
</audio>

<!-- Javascript segítségével -->
<button id="play">Play</button>
<button id="pause">Pause</button>
<script>
var song = document.getElementById('audio_with_controls'); /*inicializálás*/
document.getElementById('play').addEventListener('click', function() { song.play(); }, false); /*play gombhoz tartozó script*/
document.getElementById('pause').addEventListener('click', function() { song.pause(); }, false); /*pause gombhoz tartozó script*/
</script>
</body>
</html>

A példa itt elérhető.

Forrás:

http://hu.wikipedia.org/wiki/Kezd%C5%91lap

http://www.w3.org/TR/html5/the-iframe-element.html#the-video-element

http://www.w3.org/TR/html5/the-iframe-element.html#the-audio-element

Creative Commons Licenc

HTML5 Audio – Video a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.