aktuelle Zeit Tooltip, wenn ich auf einem Schieberegler schweben html5 Video

Question

Hallo Freunde, ich arbeitete an der Erstellung eines html5 Video-Player und ich blieb mit dem Problem stecken. Ich möchte, dass, wann immer wir auf der Suchleiste schweben, eine kleine Box erscheinen und die Zeit an der Stelle auf der Suchleiste anzeigen sollte. Irgendwelche Vorschläge werden geschätzt.

Answer 1

Update-Typen:

Endlich habe ich einen Weg bekam die aktuelle Zeit Tooltip in einer reaktions Weise als je zuvor hier ist ein einfaches Beispiel zu machen:

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>