Strona główna > HTML5, Internet Explorer > HTML5 – Wideo i Canvas w przerysowaniu

HTML5 – Wideo i Canvas w przerysowaniu

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.

Canvas czyli Płótno jakie udostępnia nam znacznik pozwala na dynamiczną manipulację elementami graficznymi oraz na generowanie nowych obrazów w kodzie JavaScript. Canvas pozwala na jednostkowe operacje na pikselach, które składają się z czterech elementów: koloru czerwonego, koloru zielonego, koloru niebieskiego oraz kanału alfa – piksele są ułożone w ciągu, który jest numerowany od lewej do prawej i od góry do dołu.

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.


Przerysowujemy

W artykule zostanie zaprezentowana metoda na przerysowanie materiału wideo, który jest uruchomiony w ramach odtwarzacza w znaczniku video do płótna reprezentowanego przez znacznik canvas.

Poniżej prezentuję przykładowy kod strony internetowej, na której zostanie wczytany obrazek z logiem HTML5:

Szkielet strony:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

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

<br/>

<canvas
id=”videoCopy” />

</body>

</html>

Po zapisaniu pliku z powyższą zawartością i rozszerzeniem html w przeglądarce internetowej powinniśmy zobaczyć następującą zawartość:

Do zaprezentowanego kodu dodajemy w sekcji head kod JavaScript:

<script
type=”text/javascript”>

</script>

W sekcji script dodajemy funkcję, która po załadowaniu strony:

  • przypisze do zmiennej canvas odwołanie do płótna.
  • przypisze do zmiennej canvasContext2D odwołanie do mechanizmu pozwalającego na rysowanie pikseli w trybie 2D.
  • przypisze do zmiennej video odwołanie do wczytanego materiału wideo.
  • zmieni rozmiar płótna na taki sam jaki ma materiał wideo.

window.onload
= function() {

var canvas =
document.getElementById(„videoCopy”);

var canvasContext2D =
canvas.getContext(„2d”);

var video =
document.getElementById(„myVideo”);

canvas.width = video.width;

canvas.height = video.height;

//poniżej należy dopisać kolejne linie kodu

};

Powyższy kod po zapisaniu i uruchomieniu w przeglądarce internetowej nie spowoduje jeszcze żadnej widocznej akcji.

Brakującym elementem jest funkcja, która będzie uruchamiana co 10 milisekund i będzie przepisywać klatki materiału wideo do płótna. Poniżej prezentuję niezbędne operacje jakie należy wykonać by napisać taką funkcję:

  • tworzymy funkcję, która uruchomi się w momencie, w którym materiał wideo będzie gotowy do odtworzenia. Zdarzenie w odtwarzaczu, które mówi o tym nazywa się canplay.
  • funkcja, która zostanie uruchomiona zostaje zapętlona z czasem 10 milisekund, w którym obecna ramka materiału wideo zostaje przepisana do płótna przy użyciu canvasContext2D zaczynając od punktu 0,0 aż do ostatniego piksela materiału wideo.

video.addEventListener(‚canplay’,
function () {

setInterval(function () {

canvasContext2D.drawImage(video, 0, 0, video.width, video.height);

}, 10);

}, false);
Efekt końcowy:

Podsumowanie

W artykule został zaprezentowany sposób na przerysowanie ramek z odtwarzanego materiału wideo do płótna Canvas. Możliwości interakcji materiałów wideo i płótna są o wiele większe, celem artykułu było przedstawienie możliwości jakie niesie za sobą współpraca tych dwóch mechanizmów.

  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: