Как показать индикатор выполнения на зависании?

Question

Постановка задачи:

Я хочу видео, которое будет воспроизводиться при наведении курсора мыши, но когда видео будет играть там должны показать бар прогресса для этого

Я получил этот учебник, который рабочий, но сейчас Я хочу добавить индикатор прогресса также при зависании

Отъезд jsfiddle

JQuery

$(document).ready(function() {  
    $('.video').each(function(i, obj) { 
     $(this).on("mouseover", function() { hoverVideo(i); }); 
     $(this).on("mouseout", function() { hideVideo(i); }); 
    }); 
}); 

function hoverVideo(i) { 
    $('.thevideo')[i].play(); 
} 

function hideVideo(i) { 
    $('.thevideo')[i].pause(); 
} 

EDIT:

Новая Постановка задачи:

---

На ходу прогресс покажет для видео, эта проблема решена, но теперь Я хочу, чтобы индикатор выполнения работал в круге на видео.

Answer 1

Использование функции Html5 и jQuery.

Пример:http://jsfiddle.net/kevalbhatt18/qgy57af9/10/

<div id="video-holder" style="width:100%;position: absolute;"> 
    <video id="video" style="width:100%"> 
     <source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"> 

    </video>  
     <progress id='p' max='100' value='0'><span>0</span>% played</progress> 
</div> 

А теперь Прогресс бар использовать этот код:

$('#p').css('display','none'); 
$('video').hover(function(){ 
    $('#video')[0].play(); 
    $('#p').css('display','block'); 

}, function(){ 
    $('#video')[0].pause(); 
    $('#p').css('display','none'); 
}); 

var video = document.getElementById('video'); 
var pBar = document.getElementById('p'); 
video.addEventListener('timeupdate', function() { 
    var percent = Math.floor((100/video.duration) * video.currentTime); 
    pBar.value = percent; 
    pBar.getElementsByTagName('span')[0].innerHTML = percent; 
}, false); 

EDIT:

Для круглого стержня прогресса использовать Progressbar.js

Пример:http://jsfiddle.net/kevalbhatt18/grwkhnuq/2/

см этот пример

var circle = new ProgressBar.Circle('#container', { 
    color: '#FCB03C', 
    strokeWidth: 2 
}); 


$('video').hover(function(){ 
    $('#video')[0].play(); 
    $('#video')[0].play(); 
    // $('#container').css('display','block'); 

}, function(){ 
    $('#video')[0].pause(); 
    // $('#container').css('display','none'); 
}); 

var video = document.getElementById('video'); 
//var pBar = document.getElementById('p'); 
video.addEventListener('timeupdate', function() { 
    var percent = Math.floor((100/video.duration) * video.currentTime); 
    console.log(percent); 
    circle.animate(percent/100, function() { 

    }); 
}, false);