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 wstyle="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 poster
pozwala 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 atrybutupreload
) 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:
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.
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ć?
Poproszę o kod – zobaczymy co tam się dzieje. Może Pan podrzucić też link do strony.
Dzięki za kontakt. Wysłane na priv
Dzięki za szybką diagnozę i pomoc. Oj, będę tu częściej zaglądał – sporo ciekawych tematów.
PozDR
przejrzysty, świetnie przygotowany poradnik. dzięki!
Witam, mam problem bo u mnie w ogóle nie chce uruchomić filmików. Nie wiem z czego to wynika. Dzięki za pomoc.
http://www.vinylsociety.pl/1.html
Cześć! Prześlij proszę adres strony, lub kod – zobaczymy co się tam dzieje 🙂 martyna@rejkowicz.pl.
Mam pytanie jak zrobić by film się automatycznie powtarzał i automatycznie się pusczał
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"
A gdzie mam wpisać loop?
Zachęcam do przeczytania artykułu, podane są konkretne przykłady. Powtórzę także przykład z poprzedniego komentarza
<video loop poster="html/img/bgDesktop.jpg">
.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%?
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.
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?
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
Witamam stworzyć strone html z filmem i muzyka ktos pomorze