At placere en video i HTML5-markering er enkel, ikke mere kompleks for en given browser end at placere et billede. I denne artikel udnytter vi den indbyggede browsersupport til at udnytte den enkleste mulige videospiller.

Vi laver applikationens grundlæggende ramme og bruger derefter

Forudsætninger

Brug Chrome, Safari eller Internet Explorer 9+. For tiden skal du undgå Firefox og Opera på grund af problemerne med tv-browseren på tværs af browseren. Selvom understøttelse af videoelementet er ensartet på tværs af alle moderne browsere, springer MP4-formatet op Firefox og Opera. Du kan check for kompatibilitet her.

Før du begynder skal du finde en .mp4, som du kan bruge, hvis du ikke har en, finder du masser af gratis mp4-filer online.

Opbygning af de grundlæggende rammer

Den følgende kode er den ramme, som du opbygger afspilleren til. Det skaber et simpelt layout og har en pladsholder til selve videoen.

Du skal oprette en ny HTML-fil i din arbejdsmappe og navngive den index.html, og tilføj derefter denne kode:

HTML5 Video Player

HTML5 Video Player

Nu, med grundlaget lagt, lad os komme til den sjove del af afspilleren ved at tilføje en video til siden.

Brug af videoelementet til at tilføje videoer til websider

Målet med at designe HTML5's

Sådan ser en HTML5-video ud i Chrome:

html5_action_002

Den næste liste viser al den kode, der kræves for at vise videoen. Som du kan se, er det ikke kompliceret.

Indsæt denne kode i stedet for " "Kommentere i koden ovenfor, skal du sørge for at erstatte [DIN VIDEO] med stien til din .mp4 og opdatere siden.