如何在悬停时显示进度条? [英] How to show progress bar on hover?

问题描述

问题陈述:

我想要一个可以悬停播放的视频，但是什么时候可以在此处播放 应该为此显示一个进度栏

I want a video which will play on hover but when video will play there should show a progress bar for that

我知道本教程正在运行，但现在我也想在悬停上添加进度条

I got this tutorial which is working but now I want to add progress bar as well on hover

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

新问题陈述:

悬停进度将显示视频，此问题已解决，但现在 我希望进度条在视频上显示为圆形.

On hover progress will show for video this problem is solved but now I want the progress bar is working in circle on the video.

推荐答案

使用Html5功能和jQuery.

Use Html5 feature and 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

For circular progress bar use 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);

这篇关于如何在悬停时显示进度条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！