web-dev-qa-db-fra.com

rechercher un point dans la vidéo html5

Est-il possible de rechercher un point particulier dans html5 video affiché dans une page Web? Je veux dire, puis-je entrer une valeur temporelle particulière (disons 01:20:30:045) et laisser le contrôle du lecteur (curseur) se déplacer jusqu'à ce point et jouer à partir de ce point?

Dans les versions plus anciennes de mozilla vlcplugin, je pense que cela est possible avec la méthode seek(seconds,is_relative)..mais j'aimerais savoir si cela est possible dans la vidéo html.

Modifier:

J'ai créé la page avec la vidéo et ajouté le javascript comme ci-dessous.Lorsque je clique sur le lien, il affiche l'heure du clic..mais il n'incrémente pas l'emplacement de lecture..mais continue à jouer normalement.

Le lieu de lecture de la vidéo ne devrait-il pas être changé?

html

<video id="vid" width="640" height="360" controls>
       <source src="/myvid/test.mp4" type="video/mp4" /> 
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span> 
</p>

javascript

$(document).ready(function(){
    var player = $('#vid').get(0);
    $('#gettime').click(function(){
            if(player){
                current_time=player.currentTime;
                $('#showtime').html(current_time+" seconds");
                player.currentTime=current_time+10;
            }
        });
}
);
html5-videoseek
25
damon

Vous pouvez utiliser v.currentTime = seconds; pour rechercher une position donnée.

Référence: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

39
ThiefMaster

Malheureusement, certains éléments du film semblent se comporter différemment des autres. Par exemple, avec un élément video_élément Amazon, il semble que vous deviez appeler une pause avant de pouvoir rechercher un site, puis appeler play. Cependant, si vous appelez "trop ​​rapidement" après avoir défini la variable currentTime, elle ne collera pas. Impair.

Voici mon travail actuel autour de:

function seekToTime(ts) {
  // try and avoid pauses after seeking
  video_element.pause();
  video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
    // however if it close enough, then we need to call play manually
    // some shenanigans to try and work around this:
    var timer = setInterval(function() {
        if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
            video_element.play();
            clearInterval(timer);
        }       
    }, 50);
}
2
rogerdpack