web-dev-qa-db-fra.com

Détecter si un élément vidéo HTML5 est en cours de lecture

J'ai parcouru quelques questions pour savoir si un élément HTML5 est en cours de lecture, mais je ne trouve pas de réponse. J'ai consulté la documentation W3 et il y a un événement nommé "jouer" mais je n'arrive pas à le faire fonctionner.

Ceci est mon code actuel:

var stream = document.getElementsByTagName('video');

function pauseStream() {
  if (stream.playing) {
    for (var i = 0; i < stream.length; i++) {
      stream[i].pause();
      $("body > header").addClass("paused_note");
      $(".paused_note").text("Stream Paused");
      $('.paused_note').css("opacity", "1");
    }
  }
}
javascripthtml5videojavascript-eventshtml5-video
61
user1076821

Remarque: Cette réponse a été donnée en 2011. Veuillez vérifier la documentation mise à jour sur la vidéo HTML5 avant de poursuivre.

Si vous voulez simplement savoir si la vidéo est en pause, utilisez le drapeau stream.paused.

Il n'y a pas de propriété pour l'élément video permettant d'obtenir l'état de lecture. Mais il y a un événement "en train de jouer" qui sera déclenché quand il commencera à jouer. L'événement "terminé" est déclenché lorsqu'il arrête de jouer.

Donc la solution est

  1. decaler une variable videoStatus
  2. ajouter des gestionnaires d'événements pour différents événements de la vidéo
  3. mettre à jour videoStatus à l'aide des gestionnaires d'événements
  4. utilisez videoStatus pour identifier le statut de la vidéo

Cette page vous donnera une meilleure idée des événements vidéo. Jouez la vidéo sur cette page et voyez comment les événements sont déclenchés.
http://www.w3.org/2010/05/video/mediaevents.html

22
Diode

Il me semble que vous pourriez simplement vérifier !stream.paused.

97
Samuel Cole

Ma réponse à Comment savoir si un élément <video> est en cours de lecture? :

MediaElement ne possède pas de propriété indiquant si sa lecture est active ou non. Mais vous pouvez définir une propriété personnalisée pour elle.

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

Vous pouvez maintenant l'utiliser sur les éléments video ou audio comme ceci:

if(document.querySelector('video').playing){
    // Do anything you want to
}
25
Raees Iqbal
jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});
15
geilt

Ajoutez des eventlisteners à votre élément média. Les événements possibles pouvant être déclenchés sont les suivants: événements multimédia audio et vidéo

<!DOCTYPE html> 
<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body >
    <div id="output"></div>
    <video id="myVideo" width="320" height="176" controls autoplay>
        <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
    </video>
    <script>
        var media = document.getElementById('myVideo');

        // Playing event
        media.addEventListener("playing", function() {
            $("#output").html("Playing event triggered");
        });
   
        // Pause event
        media.addEventListener("pause", function() { 
            $("#output").html("Pause event triggered"); 
        });

        // Seeking event
        media.addEventListener("seeking", function() { 
            $("#output").html("Seeking event triggered"); 
        });

        // Volume changed event
        media.addEventListener("volumechange", function(e) { 
            $("#output").html("Volumechange event triggered"); 
        });

    </script>   
</body> 
</html>
10
Kurt Van den Branden

J'ai rencontré un problème similaire dans lequel je ne pouvais pas ajouter d'écouteurs d'événements au lecteur avant le début de la lecture de après; la méthode de @ Diode ne fonctionnait donc malheureusement pas. Ma solution était de vérifier si la propriété "en pause" du lecteur était définie sur true ou non. Cela fonctionne parce que "en pause" est défini sur true avant même que la lecture de la vidéo ne commence et ne soit terminée, et pas seulement lorsqu'un utilisateur a cliqué sur "pause".

3
cjroth

Voici ce que nous utilisons à l'adresse http://www.develop.com/webcasts pour empêcher les personnes de quitter accidentellement la page pendant la lecture ou la pause d'une vidéo.

$(document).ready(function() {

    var video = $("video#webcast_video");
    if (video.length <= 0) {
        return;
    }

    window.onbeforeunload = function () {
        var htmlVideo = video[0];
        if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) {
            return null;
        }

        return "Leaving this page will stop your video.";
    };
}
2
Michael Kennedy
function playPauseThisVideo(this_video_id){

  var this_video = document.getElementById(this_video_id);

  if(this_video.paused){

    console.log("VIDEO IS PAUSED");

  } else {

    console.log("VIDEO IS PLAYING");

  }

}
1
Mr. Anno-Dankyi Kwaku

un peu exemple

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}
1
Preschian

Je viens de le faire très simplement en utilisant les propriétés onpause et onplay de la balise vidéo html. Créez une fonction javascript pour basculer une variable globale afin que la page connaisse le statut de la vidéo pour d'autres fonctions.

Javascript ci-dessous:

   // onPause function
   function videoPause() {
      videoPlaying = 0;
   }

   // onPause function
   function videoPlay() {
      videoPlaying = 1;
   }

Balise vidéo HTML:

<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
                             <source src="video/myvideo.mp4" type="video/mp4">

                            </video>

javascript que vous pouvez utiliser pour faire quelque chose en fonction de la variable de statut dans ce cas, videoPlaying.

j'espère que cela t'aides...

0
JediSal

Je viens de regarder le lien ajouté @tracevipin ( http://www.w3.org/2010/05/video/mediaevents.html ) et j'ai vu une propriété nommée "en pause".

Je l'ai testé et cela fonctionne très bien.

0
Simon the Salmon

C'est mon code - en appelant la fonction play(), la vidéo est lue ou mise en pause et l'image du bouton est modifiée.

En appelant la fonction volume(), le volume est activé/désactivé et l'image du bouton change également.

function play() { 
  var video = document.getElementById('slidevideo'); 
  if (video.paused) {
    video.play()
    play_img.src = 'img/pause.png'; 
  }
  else {
    video.pause()
    play_img.src = 'img/play.png';
  }
}

function volume() { 
  var video = document.getElementById('slidevideo');
  var img = document.getElementById('volume_img');
  if (video.volume > 0) {
    video.volume = 0
    volume_img.src = 'img/volume_off.png';  
  }
  else {
    video.volume = 1
    volume_img.src = 'img/volume_on.png';
  }
}
0
Damaris