Share
Hoewel het idee van een video-specifiek HTML-element al meer dan tien jaar geleden werd geopperd, zijn we nog maar net begonnen het tot stand te brengen! Vergeet al die "HTML5 2012" mumbo-jumbo; de waarheid is dat je de video- element in uw projecten nu! Je hoeft je alleen maar bewust te zijn van een handvol vereisten voordat je de gedachtes zonder deins te nemen.
Accentsconagua
document.createElement ( 'video'). Vreemd genoeg lijkt dit het bewustzijn van IE te activeren. Ja - het is nogal vreemd, maar we verwachten dat van Internet Explorer, toch? Om dit proces te versnellen, creëerde Remy Sharp HTML5 Shiv, waarmee ook sommige afdrukproblemen bij het werken met HTML5-elementen worden verholpen. Download het script en verwijs ernaar binnen de hoofd gedeelte van uw document (en).ogg format, terwijl Webkit-browsers kunnen renderen mp4 videos. In feite is dit een overdreven vereenvoudiging; dit zal echter voorlopig wel gebeuren. Het is echter voldoende om te zeggen dat er meer videotypes worden ondersteund, waaronder de recent geopende V8-codec van Google. 
Zoals bij elk project, is onze eerste stap het creëren van de noodzakelijke mark-up voor ons project.
Aangepaste HTML5-videospeler HTML5-video
Zoek eerst enkele voorbeeldvideo's om mee te werken. De open-source "Big Bunny Buck" Pixar-achtige video is wat ik ga gebruiken. Ik weet zeker dat je het ondertussen al op internet hebt gezien. Het bekijken van deze verhoging in de browser kan u een vraagteken over uw hoofd laten.
Huh? Dat is het? Het ziet er gewoon uit als een afbeelding. Wat is het probleem? Nou, standaard is dit alles dat we hebben aangevraagd. We moeten dan specificeren of we de bedieningselementen moeten weergeven, een poster moeten weergeven, enz. Laten we dat nu doen; herzien uw video- element, zoals zo:
Al meteen merken we dat er geen citaten rond de attributen staan. Het blijkt dat ze niet nodig zijn. Hoewel jaren geleden, werd het als een slechte gewoonte beschouwd om ze uit te sluiten, dit is niet langer het geval. Op dit moment komt het alleen neer op persoonlijke voorkeur. Dus, als je je meer op je gemak voelt door ze toe te voegen, doe dat dan met alle middelen.
Het is duidelijk dat we de standaardinstellingen van de browser niet gebruiken. Als zodanig moeten we onze eigen controles-mark-up implementeren. Voordat we verder gaan, heb je je misschien afgevraagd: "Wat is het nut van het toevoegen van de controls attribuut helemaal? Het antwoord is omdat we moeten overwegen en compenseren voor het feit dat JavaScript mogelijk is uitgeschakeld op de computer van de kijker. In die gevallen hadden we het niet toegevoegd controls attribuut, ze zouden alleen zien wat een afbeelding lijkt te zijn.
Houd altijd rekening met de mogelijkheid dat JavaScript mogelijk is uitgeschakeld.
De div met een id van "videoControls" zullen we de nodige knoppen en logo toevoegen. Een handige kleine truc is het gebruik van "& # x25BA;" om de afspeelknop te maken. Maak je niet al te veel zorgen over de div "vooruitgang"; we zullen deze sectie later in deze tutorial in meer detail bespreken. Het korte antwoord is dat dit de container is voor onze voortgangsbalk. Ten slotte voegen we een toe knop dat zal de full-screen functionaliteit, evenals het Tuts + -logo schakelen.
Maak je geen zorgen; Hoewel het lijkt alsof we nu een tweede set besturingselementen hebben gemaakt (en daarop niet gestypt zijn), zullen we uiteindelijk de standaardbesturingselementen met JavaScript verwijderen. Desalniettemin moet de bovenstaande schermafbeelding overeenkomen met uw eigen voorbeeld, als u meegaat.
Nu de mark-up is voltooid, kunnen we nu doorgaan naar het leuke gedeelte! Maak een nieuwe map, genaamd "js," en voeg een nieuw bestand toe: videoPlayer.js. Laten we vervolgens goede jongens en meisjes zijn en onze code omlijsten in een zelfoproepende anonieme functie om te voorkomen dat onnodige globale variabelen ontstaan.
(functie (venster, document) (dit, document))
Je kunt de argumenten verwijderen als je wilt, het is een kleine verbetering met twee voordelen:
deze (het globale Window-object) en document, we voorkomen dat de JavaScript-engine moet filteren en die objecten moet volgen. Dit kan een groot gemak zijn voor grotere projecten, maar het biedt een zeer klein prestatievoordeel. venster en document kan nu via zoiets worden weergegeven een en b. Laten we vervolgens onze code zo schoon mogelijk houden door een video speler object dat al onze methoden bevat. We zullen ook een maken in het methode die onmiddellijk wordt aangeroepen wanneer de pagina wordt geladen.
(functie (venster, document) var videoPlayer = init: function () ; videoPlayer.init (); (dit, document))
Omdat we zeker elementen op de pagina zullen manipuleren, laten we doorgaan en verwijzen naar de locatie van deze elementen binnen variabelen. Vlak voordat we de variabele "videoPlayer" declareren, plaats je het volgende:
var video = document.getElementsByTagName ('video') [0], videoControls = document.getElementById ('videoControls'), play = document.getElementById ('play'), progressContainer = document.getElementById ("progress"), progressHolder = document.getElementById ("progress_box"), playProgressBar = document.getElementById ("play_progress"), fullScreenToggleButton = document.getElementById ("fullScreen"); Als je meewerkt (en ik hoop dat je dat bent), neem dan de tijd om precies te leren waar deze variabelen naar verwijzen. Verwijs zo nodig terug naar uw mark-up. We pakken het video-element, de div onderdelen van de videobediening, de knop Afspelen, de knop Schakelen op volledig scherm en de drie progress-divs. We 'cachen' de locatie van deze elementen omdat er geen reden is om de DOM onnodig te doorlopen elke keer dat we toegang tot een van deze elementen nodig hebben!
In het Methode Laten we beginnen met het schrijven van een aantal echte codes. Binnen de in het methode, plak in het volgende fragment:
init: function () // dit is gelijk aan het object videoPlayer. var dat = dit; // Nuttige CSS-trigger voor JS. document.documentElement.className = 'js'; // Weg met de standaardbesturingselementen, omdat we onze eigen gebruiken. video.removeAttribute ( 'controles'); // Als de metagegevens gereed zijn, geeft u de bedieningselementen video.addEventListener ('loadeddata', this.initializeControls, false); Een nette manier waarop we elementen opmaken op basis van of JavaScript is ingeschakeld, is door een klasse van "js" toe te passen op de documentElement, of de html element.
// Nuttige CSS-trigger voor JS. document.documentElement.className = 'js';
Dit stelt ons in staat om CSS te schrijven zoals:
.js #container / * deze opmaak wordt alleen weergegeven als JS is ingeschakeld * /
Denk aan het probleem met de twee sets videobedieningen? Laten we dat nu verhelpen. Dit is een gemakkelijke; we gebruiken gewoon de removeAttribute methode, en ontdoen van controls.
// Weg met de standaardbesturingselementen, omdat we onze eigen gebruiken. video.removeAttribute ( 'controles');
Laten we nu ons eerste HTML5-evenement toevoegen: loadeddata. Deze gebeurtenis wordt gestart wanneer de browser klaar is met het laden van de metagegevens voor de video. Dit is een uitstekende plek om de eerste procedures uit te voeren, zoals aangepaste besturingselementen weergeven.
// Als de metagegevens gereed zijn, geeft u de bedieningselementen video.addEventListener ('loadeddata', this.initializeControls, false); Als u een beetje JavaScript kent, maakt u zich misschien zorgen dat we Internet Explorer niet compenseren. Voor degenen die zich niet bewust zijn, herkennen IE8 en lager niet addEventListener. In plaats daarvan, op de manier waarop het eraan gewend is geraakt, gebruikt IE zijn eigen attachEvent. Dat is echter allemaal aan het veranderen in versie negen van de browser. Omdat IE8 en lager het. Niet begrijpen video- element, we kunnen de attachEvent evenement helemaal.
Wanneer de loadeddata gebeurtenisbranden, noemen we de nog te maken "initializeControls" -methode. Binnen een objectmethode kunnen we zelf niet naar "initializeControls" verwijzen. We moeten eerst naar het object zelf verwijzen: vandaar, this.initializeControls.
Laten we doorgaan en die methode nu maken.
initializeControls: function () // Wanneer alle meta-informatie is geladen, geeft u de besturingselementen videoPlayer.showHideControls ();
Zoals eerder vermeld, gebruikt u deze methode om eventuele extra beginprocedures uit te voeren als u uw eigen aangepaste speler schrijft. Voorlopig roept deze methode een andere methode op, showHideControls. Met deze nieuwe methode worden de bedieningselementen weergegeven of verborgen wanneer de gebruiker boven de video zweeft.
showHideControls: function () // Hiermee wordt de videospeler weergegeven en verborgen. video.addEventListener ('mouseover', function () videoControls.style.opacity = 1;, false); videoControls.addEventListener ('mouseover', function () videoControls.style.opacity = 1;, false); video.addEventListener ('mouseout', function () videoControls.style.opacity = 0;, false); videoControls.addEventListener ('mouseout', function () videoControls.style.opacity = 0;, false); Deze methode koppelt vier gebeurtenishandlers aan de videospeler en bestuurt elementen, weergegeven door de video- en videoControls variabelen, respectievelijk. Deze code is eenvoudig: wanneer u de video over de muis beweegt, wijzigt u de dekking van de videobesturingselementen in 1. Omgekeerd, verbergt u de bedieningselementen uit de weergave wanneer ze zijn uitgeschakeld. Deze code gaat er ook van uit dat, standaard binnen onze stylesheet, de videobesturing ondoorzichtigheid is ingesteld op geen.
Denk eraan: delegeer styling indien mogelijk altijd naar ons CSS-bestand, in plaats van het rechtstreeks toe te voegen met uw JavaScript. Naast de prestatievoordelen en de vermindering van terugbetalingen / repaints, houdt deze praktijk zich correct aan de scheiding van presentatie en logica. Van tijd tot tijd heb je echter geen andere optie dan om de styling toe te voegen aan je JavaScript-bestand, en in die gevallen is dat oké.
We hebben nu de standaardbesturingselementen verborgen, maar we hebben nog geen logica aan deze verschillende aangepaste knoppen toegevoegd. Dat is wat we moeten doen.
Ga terug naar de in het methode, en voeg een oproep toe aan een nieuwe methode.
// Tijdens het afspelen worden pauzeknoppen ingedrukt. this.handleButtonPresses ();
U bent natuurlijk vrij om deze methoden een naam te geven zoals u dat wilt, maar probeer ze op zijn minst zodanig te benoemen dat het gemakkelijk te begrijpen is wat het doel van de functie precies is..
handleButtonPresses: function () // Wanneer op de video- of afspeelknop wordt geklikt, kunt u de video afspelen / pauzeren. video.addEventListener ('klik', this.playPause, false); play.addEventListener ('klik', this.playPause, false); // Wanneer op de afspeelknop wordt gedrukt, // schakelt u over naar het symbool "Pauze". video.addEventListener ('play', function () play.title = 'Pause'; play.innerHTML = '& # X2590; & # x2590;'; , false); // Wanneer op de pauzeknop wordt gedrukt, // schakelt u naar het pictogram "Afspelen". video.addEventListener ('pause', function () play.title = 'Afspelen'; play.innerHTML = '& # x25BA;';, false); // Als de video is voltooid, pauzeert u deze. video.addEventListener ('ended', function () this.currentTime = 0; this.pause ();, false); Binnen deze methode voegen we opnieuw een handvol nieuwe evenementen toe die beschikbaar zijn voor de video- element: spelen, pauze, en beëindigde.
Houd er rekening mee dat, bijvoorbeeld, de
spelenevenement wordt niet geactiveerd wanneer u op de afspeelknop klikt die we hebben gemaakt. Nee, het wordt geactiveerd wanneer de video zelf wordt afgespeeld. Dat is een belangrijk onderscheid om te onthouden.
Om de hierboven genoemde gebeurtenissen te activeren, voegen we een andere gebeurtenislistener toe aan de afspeelknop en luisteren we wanneer de gebruiker erop klikt.
// Als u op de video- of afspeelknop klikt, kunt u de video afspelen / pauzeren. play.addEventListener ('klik', this.playPause, false); playPause: function () if (video.paused || video.ended) if (video.ended) video.currentTime = 0; video.play (); else video.pause ();
Laten we de algemene code hierboven in het algemeen spreken. Wanneer deze methode werd aangeroepen - in ons geval, toen op de afspeelknop werd geklikt - was deze onderbroken of aan het einde van de video? Als dit laatste het geval is, moeten we de tijd van de video terugzetten naar 0, zodat deze weer vanaf het begin kan worden afgespeeld. Vervolgens moeten we de video afspelen: video.play ().
Als de video niet was gepauzeerd of aan het einde - wat inhoudt dat de video werd afgespeeld toen op de afspeelknop werd geklikt, zouden we het tegenovergestelde moeten doen en in plaats daarvan de video moeten onderbreken: video.pause ().
De speel pauze methode, hierboven beschreven, behandelt het proces van het afspelen of pauzeren van de video. Maar we moeten de gebruiker zeker feedback geven over wat de knop doet, toch? Definitief; om dit te doen, zullen we schakelen tussen een HTML-tekencode "afspelen" en "pauzeren" telkens wanneer op de knop wordt geklikt. Dus, in essentie, deze ene knop handelt zowel het spelen als het pauzeren af.
Als u de gebeurtenislisteners van zojuist raadpleegt, hebben we deze functionaliteit al toegevoegd.
// Wanneer op de afspeelknop wordt gedrukt, // schakelt u over naar het symbool "Pauze". video.addEventListener ('play', function () play.title = 'Pause'; play.innerHTML = '& # X2590; & # x2590;'; , false); // Wanneer op de pauzeknop wordt gedrukt, // schakelt u naar het pictogram "Afspelen". video.addEventListener ('pause', function () play.title = 'Afspelen'; play.innerHTML = '& # x25BA;';, false); Best simpel, toch? Als de afspeelknop wordt ingedrukt, de Klik gebeurtenis van de afspeelknop branden, die oproepen video.play (). Deze methode speelt dan de video af en triggert de spelen evenement. De spelen gebeurtenis verandert dan de waarde van de knop naar een pauzesymbool en werkt ook het titelkenmerk bij. Ten slotte, wanneer dit proces opnieuw plaatsvindt, doen we het tegenovergestelde.
Ik noemde het in de openingsparagraaf van deze tutorial: ondersteuning op volledig scherm is een must voor mij. Laten we die functionaliteit nu toevoegen. Keer terug naar jouw in het() methode, en, nogmaals, voeg een fragment toe aan de onderkant. We moeten luisteren wanneer die knop op het volledige scherm die we hebben gemaakt ...
... is geklikt. Wanneer dit het geval is, moeten we de video op volledig scherm zetten of andersom.
Vergeet niet:
fullScreenToggleButtonverwijst naar de knop "fullScreen".
// Als de knop Volledig scherm wordt ingedrukt ... fullScreenToggleButton.addEventListener ("klik", functie () isVideoFullScreen? That.fullScreenOff (): that.fullScreenOn ();, true); Wacht even: wat is dat wel dat? Zou het niet zo moeten zijn deze? Het antwoord is nee. In het kader van de klikgebeurtenis, deze verwijst nu naar de knop "fullScreen", niet naar de video speler voorwerp.
Om dit te verhelpen, "cachen" we de oorspronkelijke waarde van deze binnen een variabele, genaamd dat. Dit kan worden toegevoegd aan de top van onze in het() methode.
init: function () // dit is gelijk aan het object videoPlayer. var dat = dit; ...
Ta da! Nu kunnen we opnieuw verwijzen naar de video speler voorwerp. Als zodanig, that.fullScreenOff betekent "toegang krijgen tot de methode genaamd" fullScreenOff "die een onderliggende is van de video speler voorwerp.
Er is een probleem. Hoe bepalen we de huidige staat van de video? Is het op ware grootte of normale grootte? Een eenvoudige manier om met deze situatie om te gaan, is om een variabele te maken, genaamd "isVideoFullScreen." U kunt deze variabele aan de top van uw pagina toevoegen, samen met de andere. Standaard moet deze waarde natuurlijk worden ingesteld op vals.
fullScreenToggleButton = document.getElementById ("fullScreen"), // Boolean waarmee we de huidige grootte van de videospeler kunnen "onthouden". isVideoFullScreen = false, Deze boolean stelt ons nu in staat de juiste functie correct aan te roepen wanneer op de knop "fullScreen" wordt geklikt.
isVideoFullScreen? that.fullScreenOff (): that.fullScreenOn ();
Met behulp van de ternaire operator controleren we: "is de video momenteel in de modus Volledig scherm? Als dit het geval is, bellen we fullScreenOff (). Anders bellen we fullScreenOn ().
fullScreenOn: function () isVideoFullScreen = true; // Stel de nieuwe breedte in op basis van de breedte van het venster video.style.cssText = 'position: fixed; width: '+ window.innerWidth +' px; hoogte: '+ window.innerHeight +' px; '; // Pas een classname op de video en besturingselementen toe, als de ontwerper het nodig heeft ... video.className = 'fullsizeVideo'; videoControls.className = 'fs-control'; fullScreenToggleButton.className = "fs-active control"; // Luister naar escape-toets. Als u op drukt, sluit u het volledige scherm. document.addEventListener ('keydown', this.checkKeyCode, false); , fullScreenOff: function () isVideoFullScreen = false; video.style.position = 'statisch'; video.className = "; fullScreenToggleButton.className =" control "; videoControls.className ="; Binnen deze twee functies, veranderen we eerst de waarde van isVideoFullScreen, overeenkomstig. Vervolgens passen we de grootte van de video zelf aan. CSSText stelt ons in staat een reeks styling door te geven aan een element. In dit geval kunnen we deze taak niet rechtstreeks vanuit ons stylesheet uitvoeren. Dit komt omdat de gewenste waarden dynamisch zijn en afhankelijk zijn van de grootte van het browservenster van de bezoeker.
Gebruik
window.innerWidthenwindow.innerHeightom de breedte en hoogte van het browservenster op te halen.
Het is ook een goede gewoonte om op onze schermen volledige schermspecifieke classnames toe te passen. Op die manier, als u een geschikte stijl wilt toevoegen, heeft u nu een klassenaam waarop u kunt inhaken.
Naast de knop op het volledige scherm is het ook vrij gebruikelijk om de modus Volledig scherm te verlaten wanneer de gebruiker op de Escape-toets op het toetsenbord drukt. Het is een prettig gemak, en is er een die we moeten implementeren in onze speler. Gelukkig is het gemakkelijk!
// Luister naar escape-toets. Als u op drukt, sluit u het volledige scherm. document.addEventListener ('keydown', this.checkKeyCode, false); Om te kunnen luisteren naar belangrijke klikken, gebruiken we de toets neer evenement. Hoewel ik een anonieme functie zou kunnen doorgeven als de tweede parameter, zou dit stukje code op meerdere plaatsen kunnen worden gebruikt. En wanneer dit waar is, moet de code worden verplaatst naar zijn eigen functie, voor hergebruik. We zullen het noemen, checkKeyCode.
// Bepaalt of op de escape-toets is gedrukt. checkKeyCode: functie (e) e = e || window.event; if ((e.keyCode || e.which) === 27) videoPlayer.fullScreenOff ();
Deze functie is helaas meer verwarrend dan zou moeten zijn vanwege problemen met Internet Explorer. Ik ben er weliswaar niet zeker van hoe de aankomende IE9 het gebeurtenisobject afhandelt, dus zullen we voorlopig nog steeds compenseren voor de discrepanties tussen de manier waarop IE en de andere moderne browsers omgaan met het gebeurtenisobject.
Saai spijt terzijde, deze code controleert om te zien of de toets waarop werd geklikt een code van "27" heeft. Als dat het geval is, werd op de toets "Escape" gedrukt, in welk geval we het scherm Volledig scherm via kunnen afsluiten videoPlayer.fullScreenOff ().
Last but not least, moeten we de voortgang van de video volgen. Dus naarmate de video vordert, moeten we een "scrubber" -voortgang bieden die helpt bij het volgen van de video. Het stelt de gebruiker bovendien in staat om snel naar het gewenste deel van de video te scannen.
Dat is gemakkelijk: wanneer de video wordt afgespeeld! Dus, met dat in gedachten, laten we onze aanpassen spelen gebeurteniscode en een functie aanroepen die de voortgang van de video zal volgen.
// Wanneer op de afspeelknop wordt gedrukt, // schakelt u over naar het symbool "Pauze". video.addEventListener ('play', function () play.title = 'Pause'; play.innerHTML = '& # X2590; & # x2590;'; // Begin met het bijhouden van de voortgang van video's. videoPlayer.trackPlayProgress (); , false); // Update elke 50 milliseconden de voortgang van het spel. trackPlayProgress: function () (function progressTrack () videoPlayer.updatePlayProgress (); playProgressInterval = setTimeout (progressTrack, 50);) ();
Laat deze code je niet afschrikken. Het is slechts een recursieve functie waarmee we een andere methode kunnen noemen, updatePlayProgress (), elke vijftig milliseconden. Waarom niet gebruiken setInterval in plaats daarvan? Dit is zo omdat setInterval kan soms smerig zijn. Zonder in te gaan op te veel details die de reikwijdte van deze tutorial overstijgt, setInterval wordt (in dit geval) elke vijftig milliseconden uitgevoerd, ongeacht hoe lang de code binnen de functie duurt.
setIntervalis als een bestuurder in het spitsuurverkeer die weigert op de pauze te stappen.
Dus, waar mogelijk, combineren setTimeout met een recursieve functie is de slimmere oplossing. Merk op dat we toewijzen setTimeout naar een variabele, playProgressInterval, omdat we deze time-out later moeten wissen. Daarom hebben we een id nodig om in te haken.
Nu dat we dat hebben gespecificeerd, elke vijftig milliseconden, de updatePlayProgress methode zou moeten worden aangeroepen, laten we het nu maken.
updatePlayProgress: function () playProgressBar.style.width = ((video.currentTime / video.duration) * (progressHolder.offsetWidth)) + "px";
Hoewel de bovenstaande code in het begin misschien erg verwarrend lijkt, is het niet slecht. We pakken de voortgangsbalk en werken de breedte bij (elke 50 ms). We kunnen de juiste breedte bepalen door de huidige locatie van de video te delen door de lengte van de video - waarmee we kunnen berekenen video.duration. Deze waarde moet vervolgens worden vermenigvuldigd met de totale breedte van onze voortgangshouder en voila!
Maar wat gebeurt er met de video die gepauzeerd is door de gebruiker? We willen dit zeker niet voortzetten setTimeout. Natuurlijk niet. Als zodanig moeten we een andere methode maken, genaamd stopPlayProgress, en verwijs ernaar wanneer de pauze-gebeurtenis wordt geactiveerd.
// We hebben dit evenement al toegevoegd. We werken het alleen bij met een nieuwe oproep onderaan. video.addEventListener ('pause', function () play.title = 'Speel'; play.innerHTML = '& # x25BA;'; // Video is gepauzeerd, stop met het volgen van de voortgang. videoPlayer.stopTrackingPlayProgress ();, false ); // Video is gestopt, dus stop met het updaten van de voortgang. stopTrackingPlayProgress: function () clearTimeout (playProgressInterval);
De laatste stap die we in deze zelfstudie zullen bespreken, geeft details over het "scrubben" van de video. Dit betekent dat de gebruiker op de voortgangsbalk klikt en de video op en neer bladert. Ik weet zeker dat je deze taak zelf meerdere keren hebt uitgevoerd. Nee nee nee; deze dingen worden automatisch gedaan. We moeten die functionaliteit coderen.
Snel ... hou je mond.
videoScrubbing: function () progressHolder.addEventListener ("mousedown", function () videoPlayer.stopTrackingPlayProgress (); videoPlayer.playPause (); document.onmousemove = function (e) videoPlayer.setPlayProgress (e.pageX); progressHolder .onmouseup = functie (e) document.onmouseup = null; document.onmousemove = null; video.play (); videoPlayer.setPlayProgress (e.pageX); videoPlayer.trackPlayProgress ();, true); , setPlayProgress: function (clickX) var newPercent = Math.max (0, Math.min (1, (clickX - this.findPosX (progressHolder)) / progressHolder.offsetWidth)); video.currentTime = newPercent * video.duration; playProgressBar.style.width = newPercent * (progressHolder.offsetWidth) + "px"; , findPosX: function (progressHolder) var curleft = progressHolder.offsetLeft; while (progressHolder = progressHolder.offsetParent) curleft + = progressHolder.offsetLeft; Curleft retourneren; ... en adem uit. Laten we deze enorme regel code regel voor regel nemen.
videoPlayer.stopTrackingPlayProgress om de time-out te wissen die we hierboven hebben gemaakt. speel pauze methode die in dit geval de video zal pauzeren. setPlayProgress methode. 