如何在悬停时显示进度条？

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(); 
}

的 修改

新问题陈述：

  

悬停进度将显示视频，此问题已解决但现在已解决   我希望进度条在视频中循环播放。

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);

编辑：

对于循环进度条，请使用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);

的