Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Filmy z YouTube w formacie HTML


Najłatwiejszym sposobem odtwarzania filmów w HTML jest użycie YouTube.


Masz problemy z formatami wideo?

Konwersja filmów do różnych formatów może być trudna i czasochłonna.

Łatwiejszym rozwiązaniem jest umożliwienie YouTube odtwarzania filmów na Twojej stronie internetowej.


Identyfikator wideo YouTube

YouTube wyświetli identyfikator (np. tgbNymZ7vqY), gdy zapiszesz (lub odtworzysz) film.

Możesz użyć tego identyfikatora i odnieść się do swojego filmu w kodzie HTML.


Odtwarzanie wideo YouTube w HTML

Aby odtworzyć wideo na stronie internetowej, wykonaj następujące czynności:

  • Prześlij film do YouTube
  • Zanotuj identyfikator wideo
  • Zdefiniuj <iframe>element na swojej stronie internetowej
  • Niech srcatrybut wskazuje na adres URL filmu
  • Użyj atrybutów widthi height, aby określić wymiar odtwarzacza
  • Dodaj wszelkie inne parametry do adresu URL (patrz poniżej)

Przykład

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Autoodtwarzanie YouTube + wyciszenie

Możesz pozwolić, aby Twój film zaczął się automatycznie odtwarzać, gdy użytkownik odwiedza stronę, dodając autoplay=1do adresu URL YouTube. Jednak automatyczne uruchamianie filmu jest denerwujące dla odwiedzających!

Uwaga: przeglądarki Chromium w większości przypadków nie pozwalają na autoodtwarzanie. Jednak wyciszone autoodtwarzanie jest zawsze dozwolone.

Dodaj mute=1po autoplay=1, aby Twój film zaczął się automatycznie odtwarzać (ale wyciszony).

YouTube – autoodtwarzanie + wyciszenie

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>


Playlista YouTube

Oddzielona przecinkami lista filmów do odtworzenia (oprócz oryginalnego adresu URL).


Pętla YouTube

Dodaj loop=1, aby Twój film był zapętlony na zawsze.

Wartość 0 (domyślna): wideo zostanie odtworzone tylko raz.

Wartość 1: film będzie zapętlony (na zawsze).

YouTube – pętla

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>

Sterowanie YouTube

Dodaj controls=0, aby nie wyświetlać elementów sterujących w odtwarzaczu wideo.

Wartość 0: elementy sterujące odtwarzacza nie są wyświetlane.

Wartość 1 (domyślna): wyświetlanie elementów sterujących odtwarzacza.

YouTube – sterowanie

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>