HTML5-video - autoplay

by tmyie

HTML

<div class="container">
    <video autobuffer>
        <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div class="controls">
        <button id="pause">pause</button>
        <button id="play">play</button>
        <div id="timer"></div>
        <input type="range" name="" id="">
    </div>
</div>

CSS

.container {
    max-width: 400px;
}
video {
    max-width: 100%;
    display: block;
}
.controls {
    margin: 5px;
}
#timer {
    width: 0%;
    height: 10px;
    background-color: red;
}

JavaScript

var video = $('video')[0];
    var duration;
    var one_percent;
    var i = 0;

    $('#pause').on('click', function () {
        video.pause();
        var temp_width = $('#timer').width();
        $('#timer').css('width', temp_width).clearQueue().stop();
    });

    $('*').on('timeupdate', function () {
        
        one_percent+= one_percent;
        $('#timer').css('width', one_percent);
        console.log(one_percent);
    });

    $('#play').on('click', function () {
        duration = video.duration;
        one_percent = duration / 100;
        video.play();

    });