V tomto článku vám ukážem,ako pomocou HTML5 vytvoriť video s prehrávačom
V komentároch v zdrojovom kóde nájdete jednoduchý postup.
Vytvoríme si súbor .html s názvom napr. videopcexpert.html
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<link rel="stylesheet" href="styly.css">
<title>Časová osa</title>
<video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()" autobuffer="true"
width="400px" height="300px">
<source src="/html5/klip.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="/html5/klip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
<canvas id="timeline" width="400px" height="300px">
<script type="text/javascript">
// doba v milisekundách medzi aktualizáciami snímok
var updateInterval = 5000;
// veľkosť snímkov
var frameWidth = 100;
var frameHeight = 75;
// počet snímkov
var frameRows = 4;
var frameColumns = 4;
var frameGrid = frameRows * frameColumns;
// aktuální snímok
var frameCount = 0;
// k zrušeniu časovača po skončení prehrávania
var intervalId;
var videoStarted = false;
function startVideo() {
// časovač sa nastaví iba pri prvom spustení videa
if (videoStarted)
return;
videoStarted = true;
// zobrazení úvodního snímku a nastavení časovače pro pravidelné
// zobrazování dalších snímků
updateFrame();
intervalId = setInterval(updateFrame, updateInterval);
// nastavenie obsluhy kliknutí na snímku
var timeline = document.getElementById("timeline");
timeline.onclick = function(evt) {
var offX = evt.layerX - timeline.offsetLeft;
var offY = evt.layerY - timeline.offsetTop;
// určenie poradia snímky, na ktorý používateľ klikli (počíta sa od nuly)
var clickedFrame = Math.floor(offY / frameHeight) * frameRows;
clickedFrame += Math.floor(offX / frameWidth);
// určenie snímku hľadaného vo videu
var seekedFrame = (((Math.floor(frameCount / frameGrid)) *
frameGrid) + clickedFrame);
// ak užívateľ klikol na snímku, ktorý sa v časovej osi nachádza
// za aktuálnym snímkom, jedná sa o snímka z predchádzajúceho cyklu snímok
if (clickedFrame > (frameCount % 16))
seekedFrame -= frameGrid;
// nie je možné posunúť sa pred začiatok videá
if (seekedFrame < 0)
return;
// presunutie na daný snímok videa (v sekundách)
var video = document.getElementById("movies");
video.currentTime = seekedFrame * updateInterval / 1000;
// nastavenie aktuálneho počtu snímok na cieľový snímku
frameCount = seekedFrame;
}
}
// zobrazí snímka na plátne
function updateFrame() {
var video = document.getElementById("movies");
var timeline = document.getElementById("timeline");
var ctx = timeline.getContext("2d");
// výpočet aktuální pozice na základě počtu snímků
// následně se do plátna přidá obrázek - jako jeho zdroj slouží video
var framePosition = frameCount % frameGrid;
var frameX = (framePosition % frameColumns) * frameWidth;
var frameY = (Math.floor(framePosition / frameRows)) * frameHeight;
ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight);
frameCount++;
}
// ukončeie zobrazovánía snímku
function stopTimeline() {
clearInterval(intervalId);
}
</script>
</html>Výsledok:
http://www.pocitacovyexpert.6f.sk/html5/videopcexpert.html