當前時間工具提示當我懸停在一個滑塊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>