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>