Umístění videa do značkování HTML5 je jednoduché a pro daný prohlížeč není složitější než umístění obrázku. V tomto článku plně využijeme vestavěnou podporu prohlížeče pro vybudování nejjednoduššího možného přehrávače videa.

Umístíme základní rámec aplikace a poté použijeme

Předpoklady

Používejte Chrome, Safari nebo Internet Explorer 9+. V současné době se budete muset vyhnout Firefoxu a Opera kvůli problémům s formátem videa ve formátu cross-browser. Přestože podpora prvku videa je konzistentní ve všech moderních prohlížečích, formát MP4 vypíná Firefox a Opera. Můžeš zde zkontrolujte kompatibilitu.

Než začnete, musíte najít .mp4, který můžete použít, pokud nemáte, najdete spoustu volných souborů mp4 online.

Vybudování základního rámce

Následující kód je rámec, ve kterém sestavujete přehrávač. Vytváří jednoduché rozložení a má místo pro samotné video.

Potřebujete vytvořit nový soubor HTML ve vašem pracovním adresáři a pojmenovat ho index.html a pak jej přidejte takto:

HTML5 Video Player

Nyní, s položeným základem, pojďme se do zábavné části přehrávače přidáním videa na stránku.

Pomocí prvku videa můžete přidat videa na webové stránky

Cíl při navrhování HTML5

Zde vypadá video HTML5 v prohlížeči Chrome:

Následující záznam zobrazuje veškerý kód potřebný k zobrazení videa. Jak můžete vidět, není to složité.

Vložte tento kód namísto položky " "Komentář v výše uvedeném kódu, ujistěte se, že jste [YOUR VIDEO] nahradili cestu k vašemu .mp4 a obnovte stránku.