SKI_V10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width:200px;
        }
    </style>
</head>
<body>

<ul>
    <li>
        <a class="select" data-source="video_file_1">
            <img src="video1_thumb.jpg" alt="">
        </a>
        <a class="select" data-source="video_file_2">
            <img src="video2_thumb.jpg" alt="">
        </a>
        <a class="select" data-source="video_file_3">
            <img src="video3_thumb.jpg" alt="">
        </a>
    </li>
</ul>


<video id="player" width="800" height="600">
    <source src="video_file_1.mp4" type="video/mp4">
</video>
<button id="control">Play</button>
<button id="ubrzaj">Ubrzaj</button>
<button id="uspori">Uspori</button>
<button id="stop">STOP</button>
<p><span id="trenutnoVreme"></span> / <span id="ukupnoVreme"></span></p>

<input type="checkbox" id="dvaput" >2x
<input type="checkbox" id="cetiriput">4x


<script>
    var control = document.getElementById("control");
    var player = document.getElementById("player");
    var uVreme = document.getElementById("ukupnoVreme");
    var tVreme = document.getElementById("trenutnoVreme");
    var ubrzaj = document.getElementById("ubrzaj");
    var uspori = document.getElementById("uspori");
    var stop = document.getElementById("stop");
    var playlist = document.getElementsByClassName("select"); //vraca niz
    var dvaput = document.getElementById("dvaput");
    var cetiriput = document.getElementById("cetiriput");

    for(var i = 0; i < playlist.length; i++){
        playlist[i].onclick=function(){
            var naziv = this.getAttribute('data-source');
            console.log(naziv);
            player.src = naziv + ".mp4";
            player.play();
            control.innerHTML="Pause";
        }
    }

    dvaput.onclick=function(){
        if(dvaput.checked){
            player.playbackRate=2;
        }else{
            player.playbackRate=1;
        }
    }

    cetiriput.onclick=function(){
        if(cetiriput.checked){
            player.playbackRate=4;
        }else{
            player.playbackRate=1;
        }
    }

    control.onclick=function(){
        if(player.paused){
            player.play();
            control.innerHTML="Pause";
        }else{
            player.pause();
              control.innerHTML="Play";
        }
    };

    uspori.onclick=function(){
        player.playbackRate/=2;
    };

    ubrzaj.onclick=function(){
         player.playbackRate*=2;
    };

    stop.onclick=function(){
        player.pause();
        player.currentTime=0;
        control.innerHTML="Play";
    };

    player.onloadedmetadata=function(){
        uVreme.innerHTML = player.duration.toFixed(2);
    };

    var interval = setInterval(function(){
        tVreme.innerHTML=player.currentTime.toFixed(2);
    },100);
</script>

</body>
</html>