HTML5 prehrávanie videa

HTML5 prehrávanie videa

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


Ako bude reklama vypadať?
-
Chcete tu reklamu len za 50 CZK?
Zobraziť formulár pre nákup

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *