HTML/CSS, Poradniki webdevelopera

Jak wstawić film w HTML?

0

Film promocyjny jest jednym z powszechniejszych, bardziej prestiżowych elementów jakie możemy umieścić na serwisie internetowym. W tym artykule omówimy jak wstawić film na stronę internetową oraz jakie są dostępne/preferowane sposoby jego publikacji.

Publikacja filmu poprzez tagi <video></video>

Jedną z dostępnych metod publikacji filmu jest wdrożenie go poprzez tagi HTML <video></video>
Warto podkreślić, że ta metoda publikacji filmów jest mało wydajna, ze względu na wagę samych plików audio a następnie próbę renderowanie ich na stronie. Mówiąc wprost, film publikowany w taki sposób, może znacznie wydłużyć czas ładowania strony.

Aby opublikować film, musimy skorzystać z tagów:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

Jak widzimy publikacja filmu odbywa się pomiędzy znacznikami <video></video> a wewnątrz znajduje się tag <source>, który odpowiada za ścieżkę do naszego pliku audio.

Jeżeli plik audio znajduje się na tym samym poziomie co nasz plik .html to ścieżką jest nazwa pliku audio. W przypadku w którym plik audio umieszczony jest w katalogu np. filmy, ścieżka będzie wyglądać następująco: filmy/nazwaplikuaudio

Warto także wspomnieć, że bardzo istotny jest parametr type=””, który określa w jakim formacie udostępniamy plik audio, czy to plik: mp4, mp3, wav, ogg, itp.

Osobiście uważamy, że ta metoda odchodzi do lamusa jeżeli chodzi o publikację filmów na serwisach internetowych.

Popularna forma publikacji filmów

Wiemy już, że zastosowanie tagów <video></video> nie jest do końca dobrym pomysłem. Zdecydowanie lepiej jest opublikować nasz film na serwisach, które są do tego przeznaczone np. Youtube czy Vimeo a następnie skorzystać z wygenerowanego kodu Embed. Jak to zrobić? O tym dowiesz się poniżej

Jak udostępnić film z YT na stronie internetowej?

Krok 1.

Wchodzimy na youtube.pl i wybieramy film, który chcemy udostępnić np.:

Wybrany film YT

Jak sam widzisz, każdy film posiada przycisk „Udostępnij”, klikamy w niego

Krok 2.

Po wybraniu opcji „Udostępnij” pojawi się popup z dostępnymi metodami, my wybierzemy opcję „Umieść”:

Forma publikacji

Krok 3.

Po wybraniu opcji „Umieść” pokaże się nowy popup z kodem html w postaci <iframe>:

Kod Embed

Kopiujemy go a następnie wdrażamy do naszej struktury HTML

Cały kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Jak umieścić film w HTML</title>
</head>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/ILT2mtjJnz0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

Uzyskany efekt:

Podsumowanie

Podejście skierowane na publikacji filmów na zewnętrznym serwisie jest o tyle dobre, że cały ciężar plików oraz proces renderowania pozostawiamy portalowi zewnętrznemu, dzięki czemu nasza strona nadal może być w pełni wydajna. (zachowując zdrowy rozsądek z ilością publikowanych filmów)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *