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 meerdere media-elementen in een HTML-pagina in te sluiten.

De volgende HTML-code toont een ingesloten Flash-video op de 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 Flash-video's niet weergeven.
  • Als je video's omzet 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 meerdere media-elementen in een HTML-pagina in te sluiten.

De volgende HTML-codefragment toont een ingesloten Flash-video op de 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 Flash-video's niet weergeven.
  • Als je video's omzet 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-codefragment toont een ingesloten video in de formaten ogg, mp4 of webm:

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 gevalideerd 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. Het HTML 5 <video>-element probeert video's af te spelen in de formaten mp4, ogg of webm. Als dit allemaal mislukt, wordt teruggeschakeld naar het <embed>-element.

Probleem

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

Opmerking:Oplossing voor validatieproblemen met <!DOCTYPE html> (HTML5).

UYouku-oplossing

De eenvoudigste manier om video's weer te geven in HTML is door gebruik te maken van Youku en andere videowebsites.

Als u video's wilt afspelen op een webpagina, kunt u de video uploaden naar Youku en andere videowebsites en vervolgens de HTML-code op uw webpagina plaatsen 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, gebruiken de meeste browsers een "hulpapplicatie" om het bestand af te spelen.

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

Voorbeeld

<a href="movie.swf">Speel een videofile</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 je realiseren dat veel mensen inline video vervelend vinden.

Let ook op 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 wanneer de gebruiker een video moet zien en op een link moet klikken, dan opent de pagina en speelt de video af.

HTML 4.01 Multimedia tags

Tag 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

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