Strona główna > HTML5, Internet Explorer > [html5] Wideo – własne przyciski

[html5] Wideo – własne przyciski

Wprowadzenie

Video jest jednym z najbardziej wyczekiwanych znaczników w HTML5. Swoją funkcjonalnością miał przyćmić wszystkie używane dotychczas dodatki do przeglądarek internetowych służące do odbierania strumienia wideo, a tym samym uwolnić użytkowników od datków firm trzecich. Na odpowiedz na pytanie czy zakładane nadzieje przełożą się na oczekiwany rezultat przyjdzie nam poczekać jeszcze kilka lat do momentu, w którym standard HTML5 zostanie zatwierdzony w całości, a główny kodek do materiałów wideo zostanie zaakceptowany przez wszystkich producentów przeglądarek internetowych.

W tym artykule zostanie zaprezentowana możliwość stworzenia własnych przycisku sterujących strumieniem wideo.

Warunkiem do wykonania przykładów jest posiadanie co najmniej jednego materiału wideo zakodowanego w formacie H.264, który zostanie umieszczony w katalogu, w którym będą zapisywane przykładowe strony pod nazwą wideo.mp4.

Sterowanie wideo

Odtwarzacz jaki ukrywa się pod znacznikiem video ma wbudowane przyciski sterujące materiałem:

image

Przyciski sterujące są automatycznie dodawane w momencie gdy w deklaracji znacznika na stronie dodamy właściwość controls. Poniżej prezentuję przykładowe wykorzystanie znacznika video na stronie wraz z włączonymi przyciskami:

<!DOCTYPE HTML>

<html>

<body>

<video src=”wideo.mp4″ autoplay controls loop width=”640″ height=”480″ id=”myVideo” />

</body>

</html>

Dodatkowo w zaprezentowanym kodzie wideo zostanie uruchomione automatycznie i będzie odtwarzane w pętli.

Pierwszym krokiem do dodania własnych przycisków sterujących będzie usunięcie parametru controls oraz autoplay, dzięki czemu będziemy mieli okazję wystartować materiał samodzielnie oraz przy użyciu własnych przycisków. Poniżej prezentuję odświeżony kod znacznika:

<video src=”wideo.mp4″ loop width=”640″ height=”480″ id=”myVideo” />

Ostatnim krokiem jest dodanie przycisków sterujących. Każdy z przycisków sterujących będzie się składał z deklaracji właściwej czyli znacznika buton oraz podpięcia zdarzenia odpowiedzialnego za interakcję z odtwarzaczem. Interakcja będzie zapewniona poprzez pobranie elementu myVIdeo, który reprezentuje w Naszym kodzie odtwarzacz i uruchomieniu metody odpowiedzialnej za operację.

<br/>

<button onclick=”document.getElementById(‚myVideo’).play()”>Odtwarzaj</button>

<button onclick=”document.getElementById(‚myVideo’).pause()”>Zatrzymaj</button>

<button onclick=”document.getElementById(‚myVideo’).volume += 0.25″>Głośność +</button>

<button onclick=”document.getElementById(‚myVideo’).volume -= 0.25″>Głośność -</button>

<button onclick=”document.getElementById(‚myVideo’).muted = true;”>Wyłącz głos</button>

<button onclick=”document.getElementById(‚myVideo’).muted = false”>Włącz głos</button>

Strona wynikowa powinna wyglądać w następujący sposób:

02_final

Podsumowanie

W artykule został zaprezentowany sposób na dodanie własnych przycisków sterujących do znacznika video. Wbudowane przyciski znakomicie się sprawdzają w większości wypadków, lecz czasami istnieje potrzeba zastąpienia wbudowanego mechanizmu własną implementacją. Znacznik video dzięki wbudowanego API w JavaScript pozwala na taką operację..

  1. Brak komentarzy.
  1. No trackbacks yet.

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s

%d blogerów lubi to: