HTML Video

Er zijn veel manieren om video 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 in HTML is niet gemakkelijk!

Je moet veel vaardigheden meester zijn om ervoor te zorgen dat je videobestanden 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 u samengevat.

Gebruik de <embed> tag

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

De volgende HTML-code geeft een Flash-video opgenomen in een webpagina weer:

Voorbeeld

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

Probeer het zelf uit

Probleem

  • HTML4 herkent de <embed> tag niet. Uw 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 een video converteert naar een ander formaat, kan deze 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 voegen.

De volgende HTML-code geeft een Flash-video opgenomen in een webpagina weer:

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 een video converteert naar een ander formaat, kan deze nog steeds niet worden afgespeeld in alle browsers.

Gebruik de <video> tag

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

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

De volgende HTML-codefragment toont een ingesloten video in het ogg, mp4 of webm-formaat 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.

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 in HTML weer te geven, 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 hyperlinks

Als een webpagina een hyperlink naar een mediabestand bevat, zal 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 de link klikt, zal de browser een "hulpapplicatie" zoals Windows Media Player starten om het AVI-bestand af te spelen:

Voorbeeld

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

Probeer het zelf uit

Een opmerking over inline video's

Een video die wordt opgenomen in een webpagina, wordt een inline video genoemd.

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

Merk op dat gebruikers mogelijk de optie voor inline video's in hun browser hebben uitgeschakeld.

Ons beste advies is om alleen in situaties waarin de gebruiker een inline video wil zien, inline video's op te nemen. Een positief voorbeeld is, wanneer de gebruiker een video moet zien en op een link moet klikken, opent de pagina en speelt de video af.

HTML 4.01 Multimedia tags

Labels Beschrijving
<applet> Niet aanbevolen.Definieer ingesloten applet.
<embed> Niet aanbevolen.Definieer ingesloten objecten (toegestaan in HTML5).
<object> Definieer ingesloten objecten.
<param> Definieer de parameters van het object.

HTML 5 Multimedia tags

Labels Beschrijving
<video> Labels definiëren geluid, zoals muziek of andere audiostromen.
<embed> Labels definiëren ingesloten inhoud, zoals plug-ins.