Aby wstawić film na stronę HTML, możesz skorzystać z kilku popularnych i uniwersalnych metod – zarówno osadzając pliki wideo bezpośrednio na swoim serwerze, jak i korzystając z filmów dostępnych w serwisach takich jak YouTube. Poniżej znajdziesz szczegółowy poradnik obejmujący najczęstsze scenariusze, praktyczne wskazówki i przykłady kodu.
Umieszczenie pliku wideo bezpośrednio na stronie za pomocą znacznika <video>
HTML5 wprowadził znacznik <video>, który umożliwia wygodne dodawanie filmów do strony internetowej bez potrzeby korzystania z zewnętrznych wtyczek.
Podstawowy przykład:
<video src="film.mp4" controls> Twój przeglądarka nie obsługuje wyświetlania wideo. </video> - src – ścieżka do pliku wideo (np. film.mp4);
- controls – dodaje widoczne przyciski do sterowania odtwarzaniem (play/pause, głośność, pełny ekran itp.).
Rozszerzona wersja z obsługą wielu formatów:
Różne przeglądarki obsługują różne formaty filmów, dlatego warto przygotować kilka wersji tego samego wideo:
<video controls> <source src="film.mp4" type="video/mp4"> <source src="film.webm" type="video/webm"> <source src="film.ogv" type="video/ogg"> Twój przeglądarka nie obsługuje wyświetlania wideo. </video> - source – określa plik i jego typ; przeglądarka wybierze pierwszy obsługiwany przez siebie format.
Dodanie miniatury (plakat filmu):
Ustaw widoczny obrazek przed odtworzeniem filmu:
<video src="film.mp4" poster="miniatura.jpg" controls></video> Osadzanie filmów z serwisów zewnętrznych (np. YouTube)
Jeśli nie chcesz trzymać dużych plików wideo na własnym serwerze lub zależy Ci na łatwej integracji – skorzystaj z możliwości osadzenia filmu z YouTube czy Vimeo.
Jak znaleźć kod do osadzenia filmu z YouTube?
- Otwórz wybrany film na YouTube,
- Kliknij pod filmem przycisk „Udostępnij„, następnie wybierz „Umieść” (ang. Embed),
- Skopiuj wygenerowany kod HTML (z użyciem
<iframe>).
Przykład kodu osadzenia filmu z YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID_FILMU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe> Wystarczy wkleić ten kod do swojej strony we wskazane miejsce.
Porównanie metod – kiedy stosować którą?
| Metoda | Zalety | Wady | Zastosowanie |
|---|---|---|---|
<video> (pliki na własnym serwerze) |
pełna kontrola, brak reklam, dowolna stylizacja | obciążenie serwera, konieczność konwersji formatów | krótkie klipy, filmy firmowe, prywatne materiały |
| Osadzenie np. z YouTube | bez obciążenia serwera, łatwość użycia, brak kosztów transferu | reklamy, mniejsza kontrola, zależność od serwisu | vlogi, filmy publiczne, duży ruch na stronie |
Praktyczne wskazówki
- Formaty – najszersze wsparcie mają MP4 (h.264/AAC), WebM i Ogg/OGV; zaleca się konwersję do przynajmniej jednego formatu alternatywnego;
- Rozmiar pliku – unikaj umieszczania dużych plików bezpośrednio na stronie (duże zużycie transferu, spowalnianie ładowania strony);
- Miniaturka – ustaw miniaturę przez atrybut
poster, aby zachęcić użytkowników do odtworzenia; - Obsługa starszych przeglądarek – umieść tekst alternatywny wewnątrz znacznika
<video>; - Dostępność – dodaj napisy (
<track>) dla osób niesłyszących lub korzystających z czytników ekranu:
<video src="film.mp4" controls> <track src="napisy.vtt" kind="subtitles" srclang="pl" label="Polski"> </video>
Zaawansowane zastosowania
- Automatyczne odtwarzanie – dodaj atrybut
autoplay, jednak pamiętaj, że przeglądarki mogą blokować automatyczne odtwarzanie dźwięku.
<video src="film.mp4" controls autoplay muted></video> - Pętla wideo – dodaj atrybut
loop, jeśli chcesz, aby film był odtwarzany w kółko; - Wyłączenie pobierania – użytkownik zawsze może pobrać wideo, ale możesz ukryć opcję pobrania w interfejsie (
controlsList="nodownload", wspierane w niektórych przeglądarkach).
Podsumowanie
Dodawanie filmów do strony HTML jest proste, a wybór metody zależy od Twoich potrzeb: jeśli zależy Ci na kontroli – korzystaj ze znacznika <video>, jeśli priorytetem są wydajność i łatwość – warto wybrać usługę zewnętrzną i osadzić film przez <iframe>. Obie metody można stylizować i rozszerzać o dodatkowe opcje, aby wideo idealnie pasowało do projektu Twojej strony.
