KATEGORIA:

Wstawianie filmu na stronę – html5

wstawianie filmu na strone

ZNACZNIK VIDEO BEZ PANELU ODTWARZANIA

Aby umieścić na stronie film, używamy znacznika <video>. Poniżej przedstawiam przykładowy a zarazem najprostszy kod wraz z omówieniem.

<video width="480" height="270" autoplay>
  <source src="lesson1.mp4" type="video/mp4">
  <source src="lesson.ogg" type="video/ogg">
</video>
  • W znaczniku <video> umieściłam wysokość i szerokość filmu. Jak widać nie jest to umieszczone w style="width: 480px;" ale bezpośrednio w znaczniku. Można więc bez obaw określać wysokość i szerokość w tym tagu. Jednak umieszczając na stronie wiele filmów, może okazać się wygodniejsze określenie ich rozmiarów w zewnętrznym arkuszu stylów.
  • Atrybut autoplay odpowiada za automatyczne odtwarzanie pliku po otwarciu okna przeglądarki.
  • Znacznik <source> określa ścieżkę do pliku. W powyższym przykładzie znajdują się dwa takie znaczniki. W pierwszym jest plik mp4. Jeżeli przeglądarka nie obsługuje plików w tym formacie to automatycznie pobierze plik z drugiego źródła. Przeglądarka zazwyczaj skorzysta z pierwszego od góry formatu, który obsługuje!

Tutaj znajduje się efekt końcowy.

Ten kod wykorzystywany jest np. na stronach z tłem w formie filmu. Nie ma tu przycisków, aby zatrzymać film, ustawione jest automatyczne odtwarzanie, można określić szerokość i wysokość na 100%. Ci którzy odwiedzali stronę rekrutacji Uniwersytetu Wrocławskiego wiedzą o czym mowa. Zalecam wejść na tą stronę i kliknąć ctrl + u aby zerknąć na kod i odnaleźć omawiany znacznik wraz z zawartością.

ZNACZNIK VIDEO Z PANELEM ODTWARZANIA

<video controls width="480" height="270" >
	<source src="lesson1.mp4" type="video/mp4">
  	<source src="lesson.ogg" type="video/ogg">
</video>	

Wystarczy dodać atrybut controls i wyświetlony zostanie panel odtwarzania. Składa się on z przycisków play, pauza, głośność, z paska postępu i opcji widoku pełnoekranowego.
Tutaj znajduje się efekt końcowy.

ATRYBUTY ZNACZNIKA VIDEO

INFORMACJA

<video width="480" height="270" autoplay>
  <source src="lesson1.mp4" type="video/mp4">
  <source src="lesson.ogg" type="video/ogg">
	Twoja przegladarka nie wspiera elementu video.
</video>

Dodając „luzem” informację: „Twoja przeglądarka nie wspiera elementu video” mamy pewność, że jeśli przeglądarka użytkownika nie wpiera <video> to zostanie on poinformowany o tym fakcie.

POSTER

Jeżeli nie ma tego atrybutu, wtedy przed odtworzeniem pliku widzimy pierwszą jego klatkę. Atrybut posterpozwala nam na ustawienie dowolnego obrazu w miejscu pierwszej klatki.

<video width="480" height="270" controls poster="poster.jpg">
	<source src="lesson1.mp4" type="video/mp4">
  	<source src="lesson1.ogg" type="video/ogg">
</video>

Tutaj znajduje się efekt końcowy.

PRELOAD

Tego atrybutu możemy użyć jeśli nie używamy atrybutu autoplay. Jeżeli wpiszemy do kodu obydwa atrybuty, wtedy preload zostanie zignorowany. Określa on co przeglądarka ma zrobić z video zanim klikniemy na przycisk play.
Możliwe opcje:

  • preload: none – przeglądarka nie robi zupełnie nic, nie zaczyna go pobierać (buforować, pasek postępu nie rusza się),
  • preload: metadata – przeglądarka pobiera wysokość, szerokość, długość filmu itp.
  • preload: auto – jest to wartość domyślna (używana jeżeli nie wpiszemy atrybutu preload) przeglądarka sama zdecyduje co pobierze w zależności od połączenia sieciowego, roamingu danych itp.

LOOP

Na wspomnianej już przeze mnie stronie rekrutacji Uniwersytetu Wrocławskiego użyty został ten atrybut. Oznacza on, że film będzie zapętlony (będzie się odtwarzał za każdym razem od początku).

STYLIZOWANIE ZNACZNIKA VIDEO W CSS

Filmy na naszej stronie mogą wyglądać jak wyżej LUB mogą wyglądać dużo lepiej a przede wszystkim inaczej. Pozwala nam na to język css i JavaScript.

Wiemy już, że jeśli nie wpiszemy atrybutu controls to domyślny, czarny panel odtwarzania się nie pokaże. Możemy sami go stworzyć. Poniżej przedstawiam przykład.

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
	<script>
      var v = document.getElementsByTagName('video')[0];
      
      v.addEventListener('timeupdate', function()
      {
        var p = document.getElementsByTagName('progress')[0];
        p.value = 100*this.currentTime/this.duration;
      });
    </script>
</head>
<body>
      <video preload="none" poster="poster.jpg" >
         <source src="lesson1.mp4" type="video/mp4"></source>
         <source src="lesson1.ogg" type="video/ogg"></source>
      </video>
      
      <nav>
         <button id="start" onclick="v.play()">Play</button>
         <button id="stop" onclick="v.currentTime=0;v.pause()">Stop</button>
         <button id="pause" onclick="v.pause()">Pause</button>
         <button id="mute" onclick="v.muted = !v.muted">Mute</button>
         <progress value="0" max="100" step="0.1"></progress>
      </nav>   
</body>
</html>

Tak wygląda kod css:

html{
        background: #F1F1F1;
}
body{
        width: 500px;
        border: 1px solid gray;
        height: 270px;
        border-radius: 5px;
        padding: 2%;
        margin: 1%;
        background: #fff;
}

video{
        display: block;
        margin: auto;
        border-radius: 5px;
        box-shadow: 0px 0px 5px 1px gray;
        width: 480px;
        height: 270px;
}

nav{
        width: 500px;
        text-align: center;
}

nav button{
        background: none;
        border: 1px solid white;
        position: relative;
        top: -70px;
        width: 10%;
        height: 18%;
        color: white;
        border-radius: 50px;
        background: black;
        opacity: 0.5;
        z-index: 1;
}

nav button:hover{
        opacity: 1;
        cursor: hand;
}

progress{
        clear: both;
        display: block;
        width: 80%;
        margin: auto;
        position: relative;
        top: -60px;
        height: 5px;
        z-index: 0;
        opacity: 0.5;
        
}

Tak wygląda plik video:

video tag

Tutaj znajduje się efekt końcowy

W powyższym przykładzie użyłam atrybutu preload: none – plik nie będzie pobierany przez przeglądarkę dopóki nie kliknę play. Dzięki JavaScript przyciski stworzone przeze mnie będą działać zgodnie z przeznaczeniem. Nawigację umieściłam w znacznikach nav. Składa się ona z czterech przycisków oraz z paska postępu.

KOMENTARZE

  1. Artykuł bardzo pomocny. Wszytko chodzi, jest jednak jedno małe „ale”. Film nie dochodzi do końca i jest ukrywany w połowie, powracając do poprzednio wyświetlane strony. Co to może być?

      1. Dzięki za szybką diagnozę i pomoc. Oj, będę tu częściej zaglądał – sporo ciekawych tematów.
        PozDR

    1. Automatycznie odtwarzanie – dodajemy atrybut autoplay np. -> video width="480" height="270" autoplay. Automatyczne powtarzanie – dodajemy atrybut loop np. -> video loop poster="html/img/bgDesktop.jpg"

  2. Bardzo pomocny wpis.
    Mam taki problem:
    Opieram się na kodzie jaki podałeś w tym wpisie i wygląda u mnie następująco:

    Na stronie mam zamieszczony film w wielkości 5% x 5%.
    Jak po kliknięciu w ten film uzyskać efekt powiększenia go np do jego oryginalnego rozmiaru, czyli 100% x 100%?

  3. Coś robię nie tak ? Wstawiłem znacznik wideo z panelem odtwarzania:

    Niestety, odtwarza się tylko fonia, widoczny jest panel, obrazu brak. Jest tak w Chrome, Firefoksie, Operze. Tylko w jednej przeglądarce, niszowej Vivaldi, plik odtwarza się prawidłowo.

    1. Próbował Pan na zwykłym przykładzie? Np. tym? video width=”480″ height=”270″ controls poster=”poster.jpg” source src=”lesson1.mp4″ type=”video/mp4″ source src=”lesson1.ogg” type=”video/ogg” /video
      W jakim formacie jest plik?

      1. Dzięki za pomoc. W międzyczasie osiągnąłem zamierzony efekt. Fragment „video controls width=”480″ height=”270” zmieniłem na „video controls=”” width=”480″ height=”270″ i zadziałało. Teraz działa zarówno z mp4 jak i z ogg.
        Pozdrawiam

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *