Att placera en video i HTML5-uppställning är enkel, inte mer komplex för en viss webbläsare än att placera en bild. I den här artikeln kommer vi att dra full nytta av det inbyggda webbläsarstödet för att bygga den enklaste möjliga videospelaren.

Vi lägger programmets grundläggande ram och använder sedan

förutsättningar

Använd Chrome, Safari eller Internet Explorer 9+. För tiden måste du undvika Firefox och Opera på grund av problem med cross-browser videofilformat. Även om stöd för videoelementet överensstämmer över alla moderna webbläsare, går MP4-formatet upp Firefox och Opera. Du kan kolla efter kompatibilitet här.

Innan du börjar måste du hitta en .mp4 som du kan använda, om du inte har en, hittar du massor av gratis mp4-filer online.

Bygga den grundläggande ramen

Följande kod är ramen för vilken du bygger spelaren. Det skapar en enkel layout och har en platshållare för själva videon.

Du måste skapa en ny HTML-fil i din arbetsmapp och namnge den index.html och lägg sedan till den här koden:

HTML5 Video Player

Nu, med grunden lagd, låt oss komma till den roliga delen av spelaren genom att lägga till en video på sidan.

Använda videoelementet för att lägga till videor på webbsidor

Målet med att utforma HTML5: s

Så här ser en HTML5-video ut i Chrome:

Nästa lista visar all kod som krävs för att visa videon. Som du kan se är det inte komplicerat.

Sätt in den här koden istället för " "Kommentera i koden ovan, se till att du byter [DIN VIDEO] med sökvägen till din .mp4 och uppdaterar sidan.