Het plaatsen van een video in HTML5-markeringen is eenvoudig, niet ingewikkelder voor een bepaalde browser dan het plaatsen van een afbeelding. In dit artikel maken we optimaal gebruik van de ingebouwde browserondersteuning om de eenvoudigst mogelijke videospeler te bouwen.

We leggen het basisraamwerk van de toepassing en gebruiken vervolgens de

voorwaarden

Gebruik Chrome, Safari of Internet Explorer 9+. Voorlopig moet je Firefox en Opera vermijden vanwege de problemen met video-bestandsindelingen in verschillende browsers. Hoewel de ondersteuning voor het video-element consistent is in alle moderne browsers, maakt het MP4-formaat Firefox en Opera razendsnel. Jij kan controleer hier op compatibiliteit.

Voordat je begint, moet je een .mp4 vinden die je kunt gebruiken. Als je die nog niet hebt, vind je veel gratis mp4-bestanden online.

Het basiskader bouwen

De volgende code is het raamwerk waarrond u de speler bouwt. Het creëert een eenvoudige lay-out en heeft een plaatsaanduiding voor de video zelf.

U moet een nieuw HTML-bestand in uw werkdirectory maken en dit index.html noemen, en vervolgens deze code toevoegen:

HTML5 Video Player

Nu, met de basis gelegd, gaan we naar het leuke gedeelte van de speler door een video aan de pagina toe te voegen.

Het video-element gebruiken om video's toe te voegen aan webpagina's

Het doel bij het ontwerpen van HTML5's

Dit is hoe een HTML5-video eruit ziet in Chrome:

De volgende lijst toont alle code die nodig is om de video weer te geven. Zoals je kunt zien, is het niet ingewikkeld.

Voer deze code in in plaats van de " "Opmerking in de bovenstaande code, zorg ervoor dat u [UW VIDEO] vervangt door het pad naar uw .mp4 en vernieuw de pagina.