web-dev-qa-db-fra.com

Pause vidéo HTML5 et rembobiner

Existe-t-il un moyen de mettre en pause et de revenir en arrière sur une vidéo HTML5? Ou tout simplement arrêter?

J'ai eu une fenêtre contextuelle jQuery. Ainsi, lorsque quelqu'un clique dessus, la fenêtre contextuelle s'affiche et la vidéo est lue. Lorsque vous appuyez sur le bouton de fermeture, la vidéo se met en pause. Donc, ce que j'essaie de faire, c'est que si vous cliquez à nouveau sur le bouton pour afficher le menu contextuel, la vidéo commence à la position de départ (0 seconde).

Merci.

31
Alejandro Ar

Vous pouvez obtenir une référence à votre élément vidéo jQuery lors de son ouverture (ou de sa fermeture) et le suspendre à l'aide de pause (), puis définissez la propriété "currentTime" sur 0 pour revenir au début.

Voici une référence à documentation pour currentTime.

voici un exemple de code:

var mediaElement = document.getElementById("video"); 
mediaElement.pause(); 
mediaElement.currentTime = 0;
46
Chris Ching

Pour disposer de la fonctionnalité stop (pause et rembobinage) appropriée, vous pouvez procéder comme suit:

var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();

Remarque: cette version est la seule qui fonctionne pour moi en chrome avec nodejs (meteorjs) dans le backend, servant les fichiers webm & ogg

7
Matyas

Appelez simplement la méthode pause() de l'élément video. Pour réinitialiser l'heure, définissez currentTime sur 0 (ou sur toute autre valeur, si nécessaire, en secondes).

5

Pour réinitialiser une vidéo à 0 seconde dans jQuery :

$('#video')[0].currentTime = 0;

Ou, dans Vanilla JS (bien que cela ait été souligné ci-dessus):

var video = document.getElementById('video');
video.currentTime = 0;
0
ajaxx042