Détecter si l'élément HTML5 Video est en cours de lecture

Question

Détecter si l'élément HTML5 Video est en cours de lecture

Demandé el 22 de Décembre, 2011: Quand la question a-t-elle été
178047 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai parcouru quelques questions pour savoir si un élément HTML5 joue, mais je ne trouve pas la réponse. J'ai consulté la documentation du W3 et il existe un événement nommé "playing", mais je n'arrive pas à le faire fonctionner.

Voici 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");
    }
  }
}

Demandé el 22 de Décembre, 2011 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

118voto

Samuel Cole Points 858

Il me semble que tu pourrais juste vérifier si !stream.paused .

Répondu el 9 de Octobre, 2012 par Samuel Cole (858 Points )

Answer 3

40voto

Raees Bhatti Points 1114

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

MediaElement n'a pas de propriété qui indique si elle joue ou non. Mais vous pouvez définir une propriété personnalisée pour cela.

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

Vous pouvez maintenant l'utiliser sur video ou audio des éléments comme celui-ci :

if(document.querySelector('video').playing){
    // Do anything you want to
}

Répondu el 3 de Juillet, 2015 par Raees Bhatti (1114 Points )

Answer 4

37voto

tracevipin Points 8987

Note : Cette réponse a été donnée en 2011. Veuillez consulter 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 l'indicateur stream.paused .

Il n'y a pas de propriété pour l'élément vidéo permettant d'obtenir le statut de lecture. Mais il existe un événement "playing" qui sera déclenché lorsque la lecture commencera. L'événement "ended" est déclenché lorsque la lecture s'arrête.

La solution est donc

décalque d'une variable videoStatus
ajouter des gestionnaires d'événements pour les différents événements de la vidéo
mise à jour videoStatus en utilisant les gestionnaires d'événements
utiliser videoStatus pour identifier l'état de la vidéo

Cette page vous donnera une meilleure idée des événements vidéo. Lisez 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

Répondu el 22 de Décembre, 2011 par tracevipin (8987 Points )

Answer 5

21voto

geilt Points 320

jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});

Répondu el 17 de Septembre, 2013 par geilt (320 Points )

Answer 6

17voto

Kurt Van den Branden Points 4288

Ajoutez des eventlisteners à votre élément multimédia. Les événements possibles qui peuvent être déclenchés sont : Événements médiatiques 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>

Répondu el 21 de Février, 2016 par Kurt Van den Branden (4288 Points )

Détecter si l'élément HTML5 Video est en cours de lecture

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Détecter si l'élément HTML5 Video est en cours de lecture

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: