Umieszczenie filmu w znacznikach HTML5 jest proste, nie jest bardziej skomplikowane dla danej przeglądarki niż umieszczanie obrazu. W tym artykule w pełni wykorzystamy wbudowaną obsługę przeglądarki, aby zbudować najprostszy możliwy odtwarzacz wideo.

Ułożymy podstawową strukturę aplikacji, a następnie użyjemy

Wymagania wstępne

Używaj Chrome, Safari lub Internet Explorera 9+. Na razie będziesz musiał unikać Firefoksa i Opery z powodu problemów z formatem plików wideo w różnych przeglądarkach. Chociaż obsługa elementu wideo jest spójna we wszystkich nowoczesnych przeglądarkach, format MP4 uruchamia Firefoksa i Operę. Możesz sprawdź kompatybilność tutaj.

Zanim zaczniesz, musisz znaleźć .mp4, którego możesz użyć, jeśli go nie masz, znajdziesz wiele darmowych plików MP4 online.

Budowanie podstawowych ram

Poniższy kod jest ramą, wokół której budujesz gracza. Tworzy prosty układ i zawiera symbol zastępczy dla samego filmu.

Musisz utworzyć nowy plik HTML w swoim katalogu roboczym i nadać mu nazwę index.html, a następnie dodać ten kod:

HTML5 Video Player

Teraz, gdy kładziemy fundamenty, przejdźmy do zabawnej części odtwarzacza, dodając film wideo do strony.

Używanie elementu wideo do dodawania filmów do stron internetowych

Cel w projektowaniu HTML5

Oto, jak wygląda film HTML5 w Chrome:

Następna lista pokazuje cały kod wymagany do wyświetlenia wideo. Jak widać, nie jest to skomplikowane.

Wstaw ten kod zamiast " "Skomentuj w powyższym kodzie, upewnij się, że zastąpiłeś [WASZĄ FILMĘ] ścieżką do .mp4 i odświeżyłeś stronę.