現在の時間ツールチップは、スライダーにカーソルを置いたときに表示されます。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>