Videofilmpjes op je website II: <video>-tag

Hier naast zie je een filmpje. Dat wordt op je scherm gezet met behulp van de HTML5-tag <video>. Op deze bladzijde wordt uitgelegd hoe je dat gebruikt.

De tag <video> is gemaakt als vervanger voor de constructie met de tags <object> en <embed>. In HTML 4 was dat de enige manier om video in je website te vertonen. Zie het item "Videofilmpjes op je website in HTML 4".

• In het volgende komen aan bod:
  1. De HTML-code.
  2. De attributen van de tags <video> en <source>.
  3. Inbouwen in je site.
   
• De HTML-code
• De HTML-code bestaat uit drie tags:
  • Een <div> om de video in het document te positioneren. Dat kun je desgewenst in de <video>-tag zelf opnemen via het style-attribuut.
  • De <video>-tag, waarmee de speler op het scherm wordt gezet.
    Tekst die binnen de <video>-tag wordt geplaatst wordt op het scherm getoond als de browser de de <video>-tag niet herkent.
  • De <source>-tags. Dat is een lijst van video-bestanden. De browser gebruikt het eerste formaat uit de lijst waar mee het kan werken.
    <source> wordt genest binnen de <video>-tag. Je hebt deze tag niet nodig als je het attribuut src hebt gebruikt in de <video>-tag zelf.
  • De <track>-tags. Dat is een lijst van bestanden waarin ondertitels staan voor de video-film. Dit blijft hier buiten beschouwing, zie desgewenst w3schools.com.
    <track> wordt genest binnen de <video>-tag.
   
• De attributen van de <video>-tag
• Er zijn negen attributen:
   
  

  Attribuut		Betekenis
  autoplay		Als je autoplay opneemt in de <video>-tag start de film automatisch op als deze is geladen. In het voorbeeld op deze bladzijde is autoplay toegepast.
  controls		Als je controls opneemt in de <video>-tag wordt de speler voorzien van een start- / stop-knop, een volumeregelaar, enz. Het default uiterlijk van de controls verschilt per browser en is mede afhankelijk van de beschikbare ruimte. Als je wilt dat ze er in elke browser hetzelfde uitzien, ben je aangewezen op CSS of een JavaScript-platform zoals Video.JS. In het voorbeeld op deze bladzijde is controls toegepast.
  height		Hiermee geef je de hoogte aan, in pixels, van de speler op het scherm. Hier: 240. Dit de hoogte inclusief de controls. Zo nodig wordt de film verschaald, waardoor er zwarte horizontale of verticale balken ontstaan.
  loop		Als je loop opneemt in de <video>-tag wordt de film opnieuw getart zodra deze is afgelopen. In het voorbeeld op deze bladzijde is loop niet gebruikt.
  muted		Als je muted opneemt in de <video>-tag wordt het geluid uitgeschakeld. In het voorbeeld op deze bladzijde is muted niet gebruikt.
  poster		Hiermee definieer je een plaatje dat wordt getoond totdat de film wordt gestart. In het voorbeeld op deze bladzijde is poster niet gebruikt.
  preload		Hiermee geef je aan hoe de film moet worden geladen. Daarvoor heb je drie keywords: - auto De hele film wordt geladen bij het laden van de pagina. Dit is de default-instelling. - metadata Er worden alleen gegevens over de film gedownload, de zg. metadata. - none Bij het laden van de pagina wordt de film niet geladen. In het voorbeeld op de bladzijde is de default instelling gebruikt.
  src		Dit is de naam van het video-bestand. Dit gebruik je als er maar één formaat beschikbaar is. Als je over meerdere formaten van de film beschikt, kun je de browser laten kiezen welk bestandsformaat er wordt gebruikt. Dat regel je met <source>-tags. Zie hieronder.
  width		Hiermee geef je de breedte aan, in pixels, van de speler op het scherm. Hier: 360. Dit de breedte inclusief de controls. Zo nodig wordt de film verschaald, waardoor er zwarte horizontale of verticale balken ontstaan.

• Opmerking: Van bovenstaande attributen moet je tenminste autoplay of controls gebruiken om de film te kunnen starten.
   
• De attributen van de <source>-tag
• Er zijn drie attributen, waarvan je de eerste twee altijd nodig hebt. De meest gebruikte zijn:
   
  

  Attribuut		Betekenis
  type		Hiermee definieer je het bestandsformaat. Op het moment dat dit wordt geschreven zijn mogelijke waarden: - video/mp4 Dit is voor het MP4-formaat. De benodigde codecs zijn H264 voor video en AAC voor audio. Alle browsers beschikken hierover en daarom is .mp4 op dit moment het aanbevolen formaat. - video/ogg Dit is voor het Ogg-formaat. De benodigde codecs zijn Theora voor video en Vorbis voor audio. Als je geen .ogg-bestanden kunt maken werkt het ook met de extensie .ogv in combinatie met video/ogv gebruiken. Dat is hier ook gedaan - video/webm Dit is voor het WebM-formaat. De benodigde codecs zijn Theora voor video en Vorbis voor audio
  src		Dit is de naam van het video-bestand, waarvan je type hebt opgegeven.
  media		Hier zou je een CSS media-query in moeten kunnen zetten, om te bepalen wanneer de film wel en wanneer niet zichtbaar zou moeten zijn. Dit attribuut wordt vooralsnog door geen enkele browser ondersteund. Niet gebruiken dus.

  
   
• Inbouwen in je site
• Regel film en bouw de code op zoals hier onder is aangegeven.
  In principe volstaat een film in het .mp4-formaat, omdat alle grote browsers het ondersteunen, inclusief Internet Explorer 11.
• Als je volledig wilt zijn heb je een film nodig in drie bestandsformaten, nl. .mp4, .ogg en .webm. Er bestaat software die de benodigde conversie in één doorgang kan maken. Dat is meestal betaalde software. De kwaliteit van freeware is vaak twijfelachtig. Het ergste wat je kan overkomen is dat er een watermerk in je film wordt gezet, of dat de film ondersteboven staat(!!)
  Wees er op bedacht dat met name het converteren naar .webm erg lang duurt. De omvang van films in .webm-formaat kan enorm groot zijn in vergelijking met .mp4. Gebruik .webm dus alleen als het écht nodig is.
• Als je meerdere formaten opgeeft, is het belangrijk dat je .mp4 als eerste noemt. Om voor mij onduidelijke reden werken andere formaten niet met Android en werkt .mp4 alleen met Android als je die als eerste opgeeft.
   
• De HTML-code van het voorbeeld staat hier onder. Er is geen CSS of JavaScript bij betrokken.

Gebruik:

• De code staat in de <BODY>, op de plaats waar de mediaspeler moet verschijnen.

De code ziet er als volgt uit:
 

<div style="float:right; margin-left:40px;
  position:relative; width:320px;">
<video controls autoplay width="320" height="240">
  <source src="Vrijdagde13deinAfrika.mp4" type="video/mp4">
  <source src="Vrijdagde13deinAfrika.ogv" type="video/ogvideo/ogv">
  <source src="Vrijdagde13deinAfrika.webm" type="video/webm">
<p>Video is niet zichtbaar, HTML5 video wordt door uw browser waarschijnlijk niet ondersteund.</p>
</video><br>
<span class="Opmerk-g">clip: Vrijdag de dertiende in Afrika, duur 14 seconden,<br>1.45-1.71 MB, afhankelijk van het formaat.</span>
</div>