HTML5視頻自定義附加搜索欄

Question

我正在修補HTML5視頻。我有一個視頻使用HTML5香草標籤<video>，像這樣的工作：

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

一切都很好。我正在尋找的是在視頻底部添加一個搜索欄的方法。 seekbar將是我擁有的代表視頻的圖像。通過點擊圖像上的任何位置，視頻將移至該點。

此外，除默認視頻功能附帶的默認進度欄外，此功能還可以使用。默認和自定義搜索欄必須保持同步，這樣當更新一個時，另一個也會移動。

任何人都可以指出我正確的方向嗎？

謝謝！

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>