Wstawianie wideo: <video>

4.1 Podstawy tagu <video>

Wstawienie wideo na stronę internetową przy użyciu elementu <video> pozwala na odtwarzanie treści wideo bezpośrednio w przeglądarce. Ten element oferuje szerokie możliwości konfigurowania odtwarzania, w tym wsparcie dla różnych formatów, zarządzanie przy pomocy atrybutów i metod JavaScript. Przyjrzyjmy się temu elementowi bliżej.

Najprostszy przykład

Tag <video> używany jest z atrybutem src, który wskazuje ścieżkę do pliku wideo. Można także dodać atrybut controls dla wyświetlenia standardowych elementów sterujących, takich jak przyciski odtwarzania, pauzy i regulacji głośności.

    
      <video src="videofile.mp4" controls></video>
    
  

Przykład z wieloma źródłami

Aby zapewnić wsparcie dla różnych przeglądarek, można wskazać kilka źródeł wideo przy użyciu tagu <source>. Pozwala to przeglądarce wybrać wspierany format wideo.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Twoja przeglądarka nie wspiera elementu wideo.
      </video>
    
  

Atrybuty tagu <video>

• src: wskazuje ścieżkę do pliku wideo
• controls: wyświetla elementy sterujące odtwarzaniem
• autoplay: automatycznie odtwarza wideo po załadowaniu strony
• loop: powtarza odtwarzanie wideo po zakończeniu
• muted: wycisza dźwięk przy załadowaniu
• preload: wskazuje, jak przeglądarka powinna ładować wideo. Możliwe wartości: none, metadata, auto
• width i height: ustawiają szerokość i wysokość odtwarzacza wideo
• poster: wskazuje obraz zastępczy, który wyświetla się przed rozpoczęciem odtwarzania wideo

4.2 Główne atrybuty

1. Automatyczne odtwarzanie

Atrybut autoplay sprawia, że plik wideo zaczyna się automatycznie odtwarzać zaraz po załadowaniu strony. Tak jak w przypadku audio, ten atrybut należy stosować ostrożnie, aby nie drażnić użytkowników.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Zapętlenie wideo

Atrybut loop wskazuje, że plik wideo ma być odtwarzany w nieskończonej pętli. Jest to przydatne dla wideo tła lub animacji.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Wyciszenie dźwięku

Atrybut muted wycisza dźwięk pliku wideo przy załadowaniu. Może to być przydatne, jeśli chcesz, aby wideo odtwarzało się bez dźwięku domyślnie, a użytkownik mógł włączyć dźwięk w razie potrzeby.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Preładowanie

Atrybut preload nakazuje przeglądarce, jak ma ładować plik wideo przy załadowaniu strony. Może przyjmować jedną z trzech wartości:

• none: przeglądarka nie powinna wstępnie ładować wideo
• metadata: przeglądarka powinna ładować tylko metadane (długość, wymiary itp.)
• auto: przeglądarka powinna całkowicie załadować wideo, gdy strona się ładuje

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

Atrybut poster wskazuje obraz zastępczy, który wyświetla się przed rozpoczęciem odtwarzania wideo. To może być przydatne do przedstawienia użytkownikowi wizualnej informacji o zawartości wideo.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Obsługiwane formaty wideo

Aby zapewnić kompatybilność między przeglądarkami, zaleca się stosowanie kilku formatów wideo. Najbardziej powszechne formaty to MP4, WebM i OGG.

Format MP4

MP4 (MPEG-4 Part 14) — jeden z najpopularniejszych formatów wideo. Jest wspierany przez większość przeglądarek i urządzeń. MP4 używa kompresji stratnej i zapewnia dobrą jakość wideo przy stosunkowo niewielkim rozmiarze pliku.

Przykład:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Format WebM

WebM — otwarty format kompresji wideo, stworzony do użycia w internecie. Jest wspierany przez większość nowoczesnych przeglądarek i zapewnia dobrą jakość wideo.

Przykład:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Format OGG

OGG (Ogg Theora) — otwarty format wideo, który jest wspierany przez wiele przeglądarek. Ten format zapewnia dobrą jakość wideo i często jest używany jako alternatywa dla MP4 i WebM.

Przykład:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Przykład użycia kilku formatów dla zapewnienia kompatybilności

Aby zapewnić kompatybilność między przeglądarkami, zaleca się podanie kilku źródeł wideo w różnych formatach. Przeglądarka wybierze pierwszy wspierany format.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Twoja przeglądarka nie wspiera elementu wideo.
      </video>