HTML5 Video benutzerdefinierte zusätzliche Suchleiste

Question

Ich bastle herum mit HTML5 Videos. Ich habe ein Video arbeiten durch die Vanille HTML5 <video> Tag, so etwas wie dies mit:

<video id="video" width="250" height="250" controls> 
    <source src="video_src.mp4" type="video/mp4"> 
</video> 

Alles ist gut. Was ich suche ist eine Möglichkeit, eine zusätzliche Suchleiste am unteren Rand des Videos zu haben. Die Suchleiste wird ein Bild sein, das das Video darstellt. Durch Klicken auf eine beliebige Stelle auf dem Bild wird das Video an diesen Punkt verschoben.

Auch dies funktioniert zusätzlich zur Standardfortschrittsleiste, die mit der Standardvideofunktionalität geliefert wird. Der Standardwert und die benutzerdefinierte Suchleiste müssten synchronisiert sein, sodass bei einer Aktualisierung auch die andere verschoben wird.

Kann mir jemand in die richtige Richtung zeigen?

Danke!

Answer 1

var vid = document.getElementById("video"); 
 
vid.ontimeupdate = function(){ 
 
    var percentage = (vid.currentTime/vid.duration) * 100; 
 
    $("#custom-seekbar span").css("width", percentage+"%"); 
 
}; 
 

 
$("#custom-seekbar").on("click", function(e){ 
 
    var offset = $(this).offset(); 
 
    var left = (e.pageX - offset.left); 
 
    var totalWidth = $("#custom-seekbar").width(); 
 
    var percentage = (left/totalWidth); 
 
    var vidTime = vid.duration * percentage; 
 
    vid.currentTime = vidTime; 
 
});//click()

#custom-seekbar 
 
{ 
 
    cursor: pointer; 
 
    height: 10px; 
 
    margin-bottom: 10px; 
 
    outline: thin solid orange; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 400px; 
 
} 
 
#custom-seekbar span 
 
{ 
 
    background-color: orange; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 10px; 
 
    width: 0px; 
 
} 
 

 
/* following rule is for hiding Stack Overflow's console */ 
 
.as-console-wrapper{ display: none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="custom-seekbar"> 
 
    <span></span> 
 
</div> 
 
<video id="video" width="400" controls autoplay> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
</video>