Å sette inn en video i HTML5-oppslag er enkel, ikke mer kompleks for en hvilken som helst nettleser enn å plassere et bilde. I denne artikkelen vil vi dra full nytte av den innebygde nettleserstøtten for å bygge den enkleste mulige videospilleren.

Vi legger programmets grunnleggende rammeverk og bruker deretter

Forutsetninger

Bruk Chrome, Safari eller Internet Explorer 9+. For tidsavbrudd må du unngå Firefox og Opera på grunn av problemene med filformat på tvers av nettleseren. Selv om støtte for videoelementet er konsekvent i alle moderne nettlesere, går MP4-formatet opp Firefox og Opera. Du kan sjekk for kompatibilitet her.

Før du begynner må du finne en .mp4 som du kan bruke, hvis du ikke har en, finner du mange gratis mp4-filer på nettet.

Bygge grunnleggende rammeverk

Følgende kode er rammen rundt hvilken du bygger spilleren. Den skaper en enkel layout og har en plassholder for selve videoen.

Du må opprette en ny HTML-fil i arbeidskatalogen din og gi den navnet index.html, og legg deretter til denne koden:

HTML5 Video Player

Nå, med grunnlaget lagt, la oss komme til den morsomme delen av spilleren ved å legge til en video på siden.

Bruk videoelementet til å legge til videoer på nettsider

Målet med utformingen av HTML5 er

Slik ser en HTML5-video ut i Chrome:

Neste oppføring viser all kode som kreves for å vise videoen. Som du kan se, er det ikke komplisert.

Sett inn denne koden i stedet for " "Kommentere i koden ovenfor, pass på at du erstatter [DIN VIDEO] med banen til .mp4, og oppdater siden.