HTML5ビデオカスタム追加のシークバー

Question

私はHTML5ビデオで悩んでいます。私はバニラHTML5に<video>タグを使用して作業したビデオを持って、このような何か：

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

すべてが順調です。私が探しているのは、ビデオの最後にシークバーを追加する方法です。シークバーはビデオを表すイメージです。画像の任意の場所をクリックすると、動画がその場所に移動します。

これも、デフォルトのビデオ機能に付属するデフォルトのプログレスバーに加えて機能します。デフォルトのシークバーとカスタムシークバーは同期していなければならないので、一方が更新されたときに他方が動くようにする必要があります。

誰でも正しい方向に向けることができますか？

ありがとうございます！

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>