web-dev-qa-db-fra.com

Barre de recherche supplémentaire HTML5 vidéo personnalisée

Je bricolage avec des vidéos HTML5. J'ai une vidéo qui fonctionne en utilisant le Vanilla HTML5 <video> tag, quelque chose comme ceci:

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

Tout est bien. Ce que je recherche, c'est un moyen d'avoir une barre de recherche supplémentaire au bas de la vidéo. La barre de recherche sera une image que j'ai qui représente la vidéo. En cliquant n'importe où sur l'image, la vidéo se déplacera à ce point.

Encore une fois, cela fonctionnera en plus de la barre de progression par défaut fournie avec la fonctionnalité vidéo par défaut. La barre de recherche par défaut et la barre de recherche personnalisée devraient être synchronisées de sorte que lorsque l'une est mise à jour, l'autre se déplace également.

Quelqu'un peut-il m'orienter dans la bonne direction?

Merci!

javascriptcsshtmlvideocanvas
8
intl
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>
29
Mohit Bhardwaj