Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

Video

Gebruikers houden van video's; ze kunnen leuk en informatief zijn. Op mobiele apparaten kunt u informatie soms gemakkelijker tot u nemen door middel van een video. Video's verbruiken echter wel bandbreedte en werken niet altijd op alle platforms hetzelfde. Gebruikers haken af als ze moeten wachten tot een video is geladen of er niets gebeurt als ze op 'afspelen' drukken. Lees meer informatie over de eenvoudigste manieren om video toe te voegen aan uw website en gebruikers op alle apparaten de meest optimale ervaring te bieden.

Een video toevoegen

Bekijk informatie over hoe u video aan uw site toevoegt en ervoor zorgt dat gebruikers op elk apparaat een optimale ervaring hebben.

TL;DR

  • Gebruik het video-element om video op uw site te laden, decoderen en af te spelen.
  • Maak video's in meerdere indelingen zodat ze op allerlei verschillende mobiele platforms kunnen worden afgespeeld.
  • Maak video's met het juiste formaat; zorg ervoor dat ze niet overlopen tot buiten de container.
  • Toegankelijkheid is belangrijk; voeg het track-element toe als onderliggend element van het video-element.

Het video-element toevoegen

Voeg het video-element toe om video op uw site te laden, decoderen en af te spelen.

<video src="chrome.webm" type="video/webm">
     <p>Het video-element wordt niet ondersteund door uw browser.</p>
</video>

Meerdere bestandsindelingen opgeven

Niet alle browsers ondersteunen dezelfde video-instellingen. Met het element <source> kunt u meerdere formaten opgeven als oplossing voor het geval de browser van de gebruiker een van de formaten niet ondersteunt. Bijvoorbeeld:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

Als de browser de <source> tags parseert, wordt via het optionele kenmerk type bepaald welk bestand moet worden gedownload en afgespeeld. Als de browser WebM ondersteunt, wordt chrome.webm afgespeeld. In het andere geval wordt er gecontroleerd of MPEG-4-video`s kunnen worden afgespeeld. Bekijk A Digital Media Primer for Geeks voor meer informatie over hoe video en audio op het web werken.

Deze benadering heeft diverse voordelen vergeleken bij het aanbieden van verschillende HTML- of serverscripts, vooral op mobiele telefoons:

  • Ontwikkelaars kunnen formaten vermelden in volgorde van voorkeur.
  • Systeemeigen switching van de client vermindert de wachttijd; er wordt slechts één verzoek gedaan om inhoud op te halen.
  • De browser een formaat laten kiezen is eenvoudiger, sneller en mogelijk betrouwbaarder dan een server-ondersteuningsdatabase te gebruiken met gebruikersagentdetectie.
  • Door het opgeven van het type van elke bestandsbron wordt het netwerk sneller. De browser kan dan een videobron selecteren zonder een gedeelte van de video te hoeven downloaden om het indelingstype vast te kunnen stellen.

Al de genoemde punten zijn met name van belang voor mobiele telefoons, waar bandbreedte en wachttijd een grote rol spelen en de gebruiker snel wil worden bediend. Het niet opgeven van een type-kenmerk kan de prestaties beïnvloeden wanneer er meerdere bronnen met niet-ondersteunde typen zijn.

Vergelijk terwijl u uw developertools voor mobiele browsers gebruikt de netwerkactiviteit met type-kenmerken en zonder type-kenmerken. Controleer ook de reactieheaders in uw browser-developertools om u ervan te verzekeren dat uw server het juiste MIME-type rapporteert; anders zullen controles van videobrontypen niet werken.

Een start- en eindtijd opgeven

Spaar bandbreedte en zorg ervoor dat uw site sneller reageert: gebruik de Media Fragments API om een start- en eindtijd toe te voegen aan het video-element.

Als u een mediafragment wilt toevoegen, hoeft u slechts #t=[start_time][,end_time] toe te voegen aan de media-URL. Als u bijvoorbeeld de video wilt afspelen tussen seconde 5 en seconde 10, geeft u het volgende op:

<source src="video/chrome.webm#t=5,10" type="video/webm">

U kunt de Media Fragments API ook gebruiken voor het leveren van meerdere weergaven op dezelfde video – zoals cue points in een dvd – zonder meerdere bestanden te hoeven coderen en uitvoeren.

Controleer met uw browser-developertools Accept-Ranges: bytes in de reactieheaders:

Screenshot Chrome Dev Tools: Accept-Ranges: bytes

Een posterafbeelding toevoegen

Voeg een posterkenmerk aan het video-element toe zodat uw gebruikers een indruk van de inhoud krijgen zodra het element wordt geladen, zonder dat de video hoeft te worden gedownload of het afspelen hoeft te worden gestart.

<video poster="poster.jpg" ...>
    ...
</video>

Een poster kan ook een noodoplossing zijn als de video src defect is of als geen van de geleverde video-indelingen worden ondersteund. Het enige nadeel van posterafbeeldingen is dat er een extra bestandsverzoek moet worden gedaan, wat enige bandbreedte kost en rendering vereist. Zie voor meer informatie Afbeeldingsoptimalisatie.

Hier volgt een vergelijking van video`s zonder en met een posterafbeelding – we geven de posterafbeelding in grijstinten weer om aan te geven dat het hier niet om de video gaat:

Screenshot Android Chrome, staand: zonder poster Screenshot Android Chrome, staand: met poster

Alternatieven voor verouderde platforms

Niet alle video-indelingen worden op alle platforms ondersteund. Controleer welke indelingen worden ondersteund op de belangrijkste platforms en zorg ervoor dat uw video in al deze indelingen correct kan worden afgespeeld.

Ondersteunde indelingen controleren

Gebruik canPlayType() om te controleren welke video-indelingen worden ondersteund. De methode kijkt naar een tekenreeksargument die bestaat uit een mime-type en optionele codecs en retourneert een van de volgende waarden:

Retourwaarde Beschrijving
(lege tekenreeks) De container en/of codec worden niet ondersteund.
misschien De container en codec(s) worden mogelijk ondersteund, maar de browser moet een video downloaden om dit te controleren.
misschien De indeling lijkt te worden ondersteund.

Hier volgen enkele voorbeelden van canPlayType()-argumenten en retourwaarden bij uitvoering in Chrome:

Type Respons
video/xyz (lege tekenreeks)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (lege tekenreeks)
video/xyz; codecs="nonsens, ruis" (lege tekenreeks)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" waarschijnlijk
video/webm misschien
video/webm; codecs="vp8, vorbis" waarschijnlijk

Video`s maken in meerdere indelingen

Er bestaan veel hulpprogramma`s waarmee u dezelfde video in verschillende indelingen kunt opslaan:

De gebruikte indeling controleren

Wilt u weten welke video-indeling de browser heeft gebruikt?

In JavaScript kunt u de gebruikte bron achterhalen met de eigenschap currentSrc van de video.

Bekijk dit voorbeeld om te zien hoe dit in de praktijk werkt: Chrome en Firefox gebruiken chrome.webm (omdat deze boven aan de lijst staat van bronnen die door deze browsers worden ondersteund) terwijl Safari chrome.mp4 gebruikt.

Juiste videoformaat

Als u uw gebruikers tevreden wilt houden, is het formaat zeker belangrijk.

Videoformaat controleren

Het feitelijk gecodeerde frameformaat van de video kan afwijken van de afmetingen in het video-element (net zoals een afbeelding niet altijd wordt weergegeven op het werkelijke formaat).

Met de eigenschappen videoWidth en videoHeight van het video-element kunt u controleren wat het gecodeerde formaat is van een video. De eigenschappen width en height retourneren de afmetingen van het video-element, waarvan het formaat kan zijn gecreëerd met CSS- of inline breedte- of hoogtekenmerken.

Zorg ervoor dat videocontainers niet te vol raken

Als een video-element te groot is voor de viewport, kan de videocontainer te vol raken. Hierdoor kan de gebruiker de inhoud niet meer bekijken of de bedieningselementen niet meer gebruiken.

Android Chrome-screenshot, staand: viewport raakt te vol door unstyled video-element Android Chrome-screenshot, liggend: viewport raakt te vol door unstyled video-element

U kunt de afmetingen van uw video regelen met JavaScript of CSS. Met behulp van JavaScript-bibliotheken en plugins zoals FitVids kunt u de juiste beeldverhouding behouden, zelf voor Flash-video`s van YouTube of andere bronnen.

Gebruik CSS-mediaquery's om het formaat van elementen op te geven afhankelijk van de afmetingen van de viewport; max-width: 100% is uw vriend.

Probeer voor media-inhoud in iframes (zoals YouTube-video's) een responsieve aanpak te hanteren (zoals de aanpak van John Surdakowski).

CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/l-BA9Ee2XuM"
          frameborder="0" width="560" height="315">
  </iframe>
</div>

Vergelijk het responsieve voorbeeld met de niet-responsieve versie.

De videospeler aanpassen

Video wordt op elk platform anders weergegeven. Bij mobiele oplossingen moet rekening worden gehouden met de oriëntatie van het apparaat. Gebruik Fullscreen API om video-inhoud in volledig scherm weer te geven.

Video wordt op elk platform anders weergegeven. Bij mobiele oplossingen moet rekening worden gehouden met de oriëntatie van het apparaat. Gebruik Fullscreen API om video-inhoud in volledig scherm weer te geven.

Hoe apparaatoriëntatie werkt voor verschillende apparaten

Apparaatoriëntatie is niet van toepassing voor desktopmonitors of laptops, maar is wel heel belangrijk wanneer u webpagina`s wilt ontwerpen voor mobiele telefoons en tablets.

Safari op iPhone kan uitstekend schakelen tussen de staande en liggende oriëntatie:

Screenshot van video die wordt afgespeeld in Safari op de iPhone, in staande modus Screenshot van video die wordt afgespeeld in Safari op de iPad Retina, in liggende modus

De apparaatoriëntatie op een iPad en bij Chrome op Android kan lastig zijn. Zonder aanpassingen ziet bijvoorbeeld een video die op een iPad in liggende modus wordt afgespeeld er zo uit:

Screenshot van video die wordt afgespeeld in Safari op de iPad Retina, in liggende modus

Door in CSS width: 100% of max-width: 100% voor een video in te stellen, kunnen veel lay-outproblemen met apparaatoriëntatie worden opgelost. U kunt ook beeldvullende alternatieven overwegen.

Inline- of fullscreenweergave

Video wordt op elk platform anders weergegeven. Safari op de iPhone geeft een video-element inline weer op een webpagina, maar speelt video af in beeldvullende modus:

Screenshot of video-element op de iPhone, staande modus

Op Android kunnen gebruikers de beeldvullende modus opvragen door op het pictogram beeldvullend te klikken. Maar normaal gesproken wordt de video inline afgespeeld:

Screenshot van video die in Chrome op Android wordt afgespeeld, in staande modus

Bij Safari op een iPad wordt video inline afgespeeld:

Screenshot van video die wordt afgespeeld in Safari op de iPad Retina, in liggende modus

Beeldvullende weergave van inhoud instellen

Voor platforms die het beeldvullend afspelen van video niet afdwingen, wordt de Fullscreen API breed ondersteund. Gebruik deze API om de beeldvullende weergave van inhoud, of de pagina, in te stellen.

Een element, zoals een video:, beeldvullend weergeven:

elem.requestFullScreen();

Het hele document beeldvullend weergeven:

document.body.requestFullScreen();

U kunt ook luisteren naar wijzigingen in de beeldvullende status:

video.addEventListener("fullscreenchange", handler);

Of controleren of het element momenteel in beeldvullende modus is:

console.log("In full screen mode: ", video.displayingFullscreen);

U kunt ook de CSS-pseudoklasse :fullscreen gebruiken om de manier te veranderen waarop elementen in de beeldvullende modus worden weergegeven.

Op apparaten die de Fullscreen API ondersteunen, kunt u miniatuurafbeeldingen gebruiken als placeholders voor video:

Bekijk de demo om te zien hoe dit in het echt werkt.

Toegankelijkheid is belangrijk

Toegankelijkheid is geen functie. Gebruikers met een visuele beperking of beperking van het gehoor hebben zonder ondertitels of beschrijvingen helemaal niets aan een video. Hoewel het tijd kost om deze elementen aan uw video toe te voegen, hoeft u op deze manier niemand teleur te stellen. Zorg ervoor dat iedere gebruiker iets aan uw video heeft.

Ondertiteling toevoegen voor meer toegankelijkheid

Als u media toegankelijker wilt maken op mobiele telefoons, kunt u ondertitels of beschrijvingen toevoegen.

Als u het track-element gebruikt, worden ondertitels als volgt weergegeven:

Screenshot toont ondertitels die worden weergegeven via het track-element in Chrome op Android

Track-element toevoegen

Het toevoegen van ondertitels aan uw video is erg gemakkelijk – voeg een track-element gewoon toe als onderliggend element van het video-element:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

Het src-kenmerk van het track-element geeft de locatie van het trackbestand.

Ondertitels in trackbestand definiëren

Een trackbestand bestaat uit getimede cues in WebVTT-indeling:

WEBVTT

00:00.000 --> 00:04.000
Man zit met een laptop op een boomtak.

00:05.000 --> 00:08.000
De tak breekt af en de man valt.

...

Snelle naslaggids

Een handig overzicht van eigenschappen in het video-element.

Kenmerken van video-elementen

Ga voor een volledig overzicht van de kenmerken van video-elementen en de beschrijving hiervan naar specificaties video-element.

Kenmerk Beschikbaarheid Beschrijving
src Alle browsers Adres (URL) van de video.
poster Alle browsers Adres (URL) van een afbeeldingsbestand dat de browser kan laten zien zodra het video-element wordt weergegeven, zonder dat de inhoud van de video wordt gedownload.
preload In alle mobiele browsers wordt het kenmerk `preload` genegeerd. Vertelt de browser dat het de moeite waard is om metadata (of sommige video`s) eerst te laden voordat ze worden afgespeeld. Opties zijn `none`, `metadata` of `auto` (zie het gedeelte Vooraf laden voor meer informatie).
autoplay Niet ondersteund voor iPhone of Android; ondersteund voor alle desktopbrowsers, iPad, Firefox en Opera voor Android. Zorgt ervoor dat er zo snel mogelijk wordt begonnen met downloaden en afspelen (zie het gedeelte Automatisch afspelen).
loop Alle browsers Zorgt ervoor dat de video steeds opnieuw wordt afgespeeld.
controls Alle browsers Geeft de standaard bedieningselementen van de video weer (afspelen, pauzeren, etc.)

Autoplay

In een desktopomgeving zorgt autoplay (automatisch afspelen) ervoor dat de browser onmiddellijk start met het downloaden van de video en deze afspeelt zodra dit mogelijk is. In iOS en Chrome voor Android werkt autoplay niet; gebruikers moeten op het scherm tikken om de video af te spelen.

Ook op platforms waarop automatisch afspelen mogelijk is, kunt u zich afvragen of het een goed idee is om deze optie te activeren:

  • Het dataverbruik kan kostbaar zijn.
  • Door zonder vragen meteen te beginnen met downloaden en afspelen kan onverwacht te veel beslag worden gelegd op de bandbreedte en de processor, waardoor pagina`s minder snel worden geladen.
  • Gebruikers kunnen zich in een situatie bevinden waarin het afspelen van beeld of geluid als hinderlijk wordt ervaren.

Automatisch afspelen kan worden geconfigureerd in Android WebView via de API WebSettings. Standaard staat deze optie ingesteld op true, maar een WebView-app kan ervoor kiezen dit uit te schakelen.

Preload

Het kenmerk preload vertelt de browser in hoeverre informatie of inhoud moet worden geladen bij het openen van de pagina.

Waarde Beschrijving
none De gebruiker bekijkt de video mogelijk niet eens– er wordt niets geladen bij het openen van de pagina
metadata Metadata (duur, formaat, tekstsporen) moeten worden geladen bij het openen van de pagina, maar met zo min mogelijk beeld.
auto Het is wenselijk dat de video meteen in zijn geheel wordt gedownload.

Afhankelijk van het platform heeft het kenmerk preload verschillende effecten. In Chrome bijvoorbeeld wordt in een desktopomgeving 25 seconden beeld gebufferd, in iOS of Android niets. Dit betekent dat op mobiele platforms soms sprake is van een opstartvertraging bij het afspelen die niet voorkomt in een desktopomgeving. Zie Steve Souders` testpagina voor volledige informatie.

JavaScript

Het artikel HTML5 Rocks Video bevat een prima overzicht van de JavaScript-eigenschappen, -methodes en -events die beschikbaar zijn voor het afspelen van video. We hebben deze informatie hier opgenomen. Deze wordt waar relevant bijgewerkt met mobielspecifieke zaken.

Eigenschappen

Eigenschap Beschrijving
currentTime Afspeelpositie in seconden ophalen of instellen.
volume Huidige volume voor video ophalen of instellen.
muted Geluiddemping ophalen of instellen.
playbackRate Afspeelsnelheid ophalen of instellen; 1 is normale snelheid vooruit.
buffered Informatie over welk gedeelte van de video in de buffer is opgeslagen en klaar is om te worden afgespeeld (zie demo).
currentSrc Het adres van de video die wordt afgespeeld.
videoWidth Breedte van de video in pixels (deze kan afwijken van de breedte in het video-element).
videoHeight Hoogte van de video in pixels (deze kan afwijken van de hoogte in het video-element).

Afspeelsnelheid (zie voorbeeld) en volume worden beide niet ondersteund op mobiel.

Methodes

Methode Beschrijving
load() Een videobron laden of opnieuw laden zonder dat de video wordt gestart: bijvoorbeeld als de videobron wordt gewijzigd met JavaScript.
play() De video afspelen vanaf diens huidige locatie.
pause() De video pauzeren op diens huidige locatie.
canPlayType('format') Overzicht van ondersteunde indelingen (zie Ondersteunde indelingen controleren).

Op mobiel werken play() en pause() niet (afgezien van Opera in Android) tenzij ze worden aangeroepen in reactie op een gebruikersactie, zoals het klikken op een knop: zie het voorbeeld. (Op dezelfde manier kan afspelen niet worden gestart voor inhoud zoals geïntegreerde YouTube-video`s.)

Gebeurtenissen

Dit is alleen een subset van de mediagebeurtenissen die mogelijk worden geactiveerd. Ga naar de pagina Media events op het Mozilla Developer Network voor een volledig overzicht.

Event Beschrijving
canplaythrough Wordt actief als de browser voldoende gegevens heeft ontvangen om de video in zijn geheel zonder onderbrekingen af te spelen.
ended Wordt actief als de video helemaal is afgespeeld.
error Wordt actief als er een fout optreedt.
playing Wordt actief als de video voor de eerste keer wordt afgespeeld, opnieuw wordt gestart na te zijn gepauzeerd, of opnieuw wordt gestart.
progress Wordt met regelmatige tussenpozen actief om de downloadvoortgang aan te geven.
waiting Wordt actief als een actie wordt uitgesteld in afwachting van voltooiing van een andere actie.
loadedmetadata Wordt actief als de browser klaar is met het laden van de metadata voor de video: duur, formaat en tekstsporen.