HTML Video

Er zijn veel manieren om video's in HTML af te spelen.

Voorbeeld

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Probeer het zelf uit

Problemen, problemen en oplossingen

Het afspelen van video's in HTML is niet gemakkelijk!

Je moet veel vaardigheden beheersen om ervoor te zorgen dat je videofiles op alle browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) en alle hardware (PC, Mac, iPad, iPhone) kunnen worden afgespeeld.

In dit hoofdstuk heeft CodeW3C.com vragen en oplossingen voor je samengevat.

Gebruik de <embed> tag

De functie van de <embed> tag is om multimediale elementen in een HTML-pagina in te sluiten.

De volgende HTML-code toont een Flash-video die is ingesloten in een webpagina:

Voorbeeld

<embed src="movie.swf" height="200" width="200"/>

Probeer het zelf uit

Probleem

  • HTML4 kan de <embed> tag niet herkennen. Je pagina kan niet worden geverifieerd.
  • Als de browser Flash niet ondersteunt, kan de video niet worden afgespeeld
  • iPad en iPhone kunnen geen Flash-video's weergeven.
  • Als je video's converteert naar andere formaten, kunnen ze nog steeds niet worden afgespeeld in alle browsers.

Gebruik de <object> tag

De functie van de <object> tag is om multimediale elementen in een HTML-pagina in te sluiten.

De volgende HTML-codefragment toont een Flash-video die is ingesloten in een webpagina:

Voorbeeld

<object data="movie.swf" height="200" width="200"/>

Probeer het zelf uit

Probleem

  • Als de browser Flash niet ondersteunt, kan de video niet worden afgespeeld.
  • iPad en iPhone kunnen geen Flash-video's weergeven.
  • Als je video's converteert naar andere formaten, kunnen ze nog steeds niet worden afgespeeld in alle browsers.

Gebruik de <video> tag

De <video> is een nieuwe tag in HTML 5.

De functie van de <video>-tag is om video-elementen in HTML-pagina's in te sluiten.

De volgende HTML-code zal een ingesloten video in ogg, mp4 of webm-formaat weergeven op een webpagina:

Voorbeeld

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Uw browser ondersteunt de video tag niet.
</video>

Probeer het zelf uit

Probleem

  • U moet de video in veel verschillende formaten converteren.
  • Het <video>-element werkt niet in oude browsers.
  • <video>-element kan niet worden geverifieerd door HTML 4 en XHTML.

De beste HTML-oplossing

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

Probeer het zelf uit

In het voorbeeld zijn er 4 verschillende videoformaten gebruikt. De HTML 5 <video>-element probeert video's af te spelen in een van de formaten mp4, ogg of webm. Als dit allemaal mislukt, schakelt het terug naar het <embed>-element.

Probleem

  • U moet de video in veel verschillende formaten converteren
  • <video>-element kan niet worden geverifieerd door HTML 4 en XHTML.
  • <embed>-element kan niet worden geverifieerd door HTML 4 en XHTML.

Opmerking:Gebruik <!DOCTYPE html> (HTML5) om validatieproblemen op te lossen.

Oplossing van Youku

De eenvoudigste manier om video's weer te geven in HTML is door gebruik te maken van websites zoals Youku.

Als u video's wilt afspelen op een webpagina, kunt u de video uploaden naar websites zoals Youku en vervolgens de HTML-code op uw webpagina invoegen om de video af te spelen:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

Probeer het zelf uit

Gebruik van hyperlinks

Als een webpagina een hyperlink naar een mediabestand bevat, zullen de meeste browsers een "hulpapplicatie" gebruiken om het bestand af te spelen.

De volgende codefragment toont een link naar een AVI-bestand. Als de gebruiker op deze link klikt, zal de browser een "hulpapplicatie" zoals Windows Media Player starten om dit AVI-bestand af te spelen:

Voorbeeld

<a href="movie.swf">Speel een videofile af</a>

Probeer het zelf uit

Een opmerking over inline video

Wanneer een video wordt opgenomen in een webpagina, wordt het een inline video genoemd.

Als je van plan bent om inline video te gebruiken in een webapplicatie, moet je beseffen dat veel mensen inline video irritant vinden.

Houd er ook rekening mee dat de gebruiker mogelijk de optie voor inline video in de browser heeft uitgeschakeld.

Ons beste advies is om alleen in situaties waarin de gebruiker een inline video wilt zien, deze op te nemen. Een positief voorbeeld is, als de gebruiker een video moet zien en op een link moet klikken, wordt de pagina geopend en speelt de video af.

HTML 4.01 Multimedia tags

Tag Beschrijving
<applet> Niet aanbevolen.Definieert ingesloten applet.
<embed> Niet aanbevolen.Definieert ingesloten objecten (toegestaan in HTML5).
<object> Definieert ingesloten objecten.
<param> Definieert parameters van objecten.

HTML 5 Multimedia tags

Tag Beschrijving
<video> Tags definiëren geluid, zoals muziek of andere audio streams.
<embed> Tags definiëren ingesloten inhoud, zoals plugins.