当前时间工具提示当我悬停在一个滑块html5视频

Question

你好朋友我正在制作一个html5视频播放器，我陷入了这个问题。我希望只要我们将鼠标悬停在搜索栏上，就会出现一个小框，并在搜索栏上显示时间点。任何建议将不胜感激。

Answer 1

更新球员：

最后我有一个方法，使当前时间提示比以往这里更适应的方式是一个简单的例子：

var video = $('video')[0]; 
 
var timeDrag = false; 
 
    $('.seek-con').on('mousedown', function(e) { 
 
    timeDrag = true; 
 
\t \t updatebar(e.pageX); 
 
\t }); 
 
\t $(document).on('mouseup', function(e) { 
 
\t \t if(timeDrag) { 
 
\t \t \t timeDrag = false; 
 
\t \t \t updatebar(e.pageX); 
 
\t \t } 
 
\t }); 
 
\t $(document).on('mousemove', function(e) { 
 
\t \t if(timeDrag) { 
 
\t \t \t updatebar(e.pageX); 
 
\t \t } 
 
\t }); 
 
\t var updatebar = function(x) { 
 
\t \t var progress = $('.seek-con'); 
 
\t \t 
 
\t \t //calculate drag position 
 
\t \t //and update video currenttime 
 
\t \t //as well as progress bar 
 
\t \t var maxduration = video.duration; 
 
\t \t var position = x - progress.offset().left; 
 
\t \t var percentage = 100 * position/progress.width(); 
 
\t \t if(percentage > 100) { 
 
\t \t \t percentage = 100; 
 
\t \t } 
 
\t \t if(percentage < 0) { 
 
\t \t \t percentage = 0; 
 
\t \t } 
 
\t \t $('.seek-inner').css('width',percentage+'%'); 
 
\t \t video.currentTime = maxduration * percentage/100; 
 
\t }; 
 
    $('.seek-con').mousemove(function(e){ 
 
     var progress = $('.seek-con'); 
 
\t \t //calculate drag position 
 
\t \t //and update video currenttime 
 
\t \t //as well as progress bar 
 
\t \t var maxduration = video.duration; 
 
\t \t var position = e.pageX - progress.offset().left; 
 
\t \t var percentage = 100 * position/progress.width(); 
 
\t \t if(percentage > 100) { 
 
\t \t \t percentage = 100; 
 
\t \t } 
 
\t \t if(percentage < 0) { 
 
\t \t \t percentage = 0; 
 
\t \t } 
 
    var x = percentage/100 * video.duration; 
 
    $('.tooltip-con')[0].innerHTML = timeFormat(x); 
 
    var offestY = progress.offset().top; 
 
    var y = e.clientX - 33; 
 
    $('.tooltip-con')[0].style.top = progress[0].offsetTop-62 + "px"; 
 
$('.tooltip-con').css('margin-left',y+'px'); 
 
    }); 
 
    $('.seek-con').hover(function(){ 
 
    $('.tooltip-con').fadeIn(); 
 
    },function(){ 
 
    $('.tooltip-con').fadeOut(); 
 
    }); 
 
var timeFormat = function(seconds){ 
 
\t \t var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60); 
 
\t \t var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60)); 
 
\t \t return m+":"+s; 
 
\t }; 
 
    $('video').on('timeupdate',function(){ 
 
     var width = 100/video.duration * video.currentTime; 
 
     $('.seek-inner').css('width',width+'%'); 
 
    }); 
 

.seek-con{ 
 
    height:10px; 
 
    width:100%; 
 
    background-color:#222; 
 
} 
 
.seek-inner{ 
 
    height:100%; 
 
    width:50%; 
 
    background-color:cyan; 
 
} 
 
.tooltip-con{ 
 
    background-color:#555; 
 
    padding:10px; 
 
    width:40px; 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<video src="https://givemesomething.000webhostapp.com/video.mp4" height="100%" width="100%" controls></video> 
 
<!--- The Seek bar ---> 
 
<div class="tooltip-con">00:00</div> 
 
<div class="seek-con"> 
 
    <div class="seek-inner"></div> 
 
</div>