Rileva se l'elemento video HTML5 è in riproduzione

Question

Ho esaminato un paio di domande per scoprire se un elemento HTML5 è in riproduzione, ma non riesco a trovare la risposta. Ho esaminato la documentazione di W3 e ha un evento chiamato "playing" ma non riesco a farlo funzionare.

Questo è il mio codice corrente:

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

Answer 1

Nota: Questa risposta è stata data nel 2011. Si prega di verificare la documentazione aggiornata sul video HTML5 prima di procedere.

Se si desidera sapere se il video è in pausa, utilizzare la flag stream.paused.

Non esiste alcuna proprietà per l'elemento video per ottenere lo stato di riproduzione. Ma c'è un evento "in riproduzione" che verrà attivato quando inizierà a giocare. L'evento "terminato" viene attivato quando smette di giocare.

Quindi la soluzione è

1. decalre una variabile videoStatus
2. aggiungere gestori di eventi per i diversi eventi di video di
3. aggiornamento videoStatus utilizzando i gestori di eventi
4. uso videoStatus a identificare lo stato del video

Questa pagina ti darà un'idea migliore degli eventi video. Riproduci il video in questa pagina e guarda come vengono avviati gli eventi.
http://www.w3.org/2010/05/video/mediaevents.html

Answer 2

ho riscontrato un problema simile in cui non ero in grado di aggiungere listener di eventi al giocatore fino dopo che aveva già iniziato a giocare, così @ il metodo di diodo, purtroppo, non avrebbe funzionato. La mia soluzione era verificare se la proprietà "sospesa" del giocatore fosse impostata su true o no. Funziona perché "messo in pausa" è impostato su true anche prima che il video inizi a essere riprodotto e al termine, non solo quando un utente ha fatto clic su "pause".

Answer 3

Mi sembra che si possa controllare per !stream.paused.

Answer 4

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

Answer 5

Ecco che cosa stiamo usando al http://www.develop.com/webcasts per impedire alla gente di lasciare accidentalmente pagina, mentre un video è in riproduzione o in pausa.

$(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."; 
    }; 
} 

Answer 6

Ho appena guardato il @tracevipin Link aggiunto (http://www.w3.org/2010/05/video/mediaevents.html), e ho visto una proprietà denominata "pausa".

L'ho provato e funziona perfettamente.

Answer 7

Questo è il mio codice: chiamando la funzione play() il video viene riprodotto o messo in pausa e l'immagine del pulsante viene modificata.

Chiamando la funzione volume(), il volume viene attivato/disattivato e anche l'immagine del pulsante cambia.

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'; 
    } 
} 

Answer 8

La mia risposta a How to tell if a <video> element is currently playing?:

MediaElement non ha una proprietà che racconta se giocare o meno. Ma potresti definire una proprietà personalizzata per questo.

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

Ora si può utilizzare su video o audio elementi come questo:

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

Answer 9

Aggiungi eventlisteners al vostro elemento multimediale. Possibili eventi che possono essere attivati ​​sono: Audio and video media events

<!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 
 
     var isPlaying = function(e) { 
 
      $("#output").html("Playing event triggered"); 
 
     }; 
 
     // Pause event 
 
     var onPause = function(e) { 
 
      $("#output").html("Pause event triggered"); 
 
     }; 
 
     // Volume changed event 
 
     var onVolumechange = function(e) { 
 
      $("#output").html("Volumechange event triggered"); 
 
     }; 
 
     // Seeking event 
 
     var onSeeking = function(e) { 
 
      $("#output").html("Seeking event triggered"); 
 
     }; 
 
     
 
     media.addEventListener("playing", isPlaying, false);  
 
     media.addEventListener("pause", onPause, false); 
 
     media.addEventListener("seeking", onSeeking, false); 
 
     media.addEventListener("volumechange", onVolumechange, false); 
 
    </script> 
 
</body> 
 
</html>

Answer 10

un esempio po

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

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

Answer 11

ho appena fatto molto semplicemente utilizzando OnPause e le proprietà onplay di il tag video html. Crea qualche funzione javascript per attivare o disattivare una variabile globale in modo che la pagina conosca lo stato del video per altre funzioni.

Javascript qui sotto:

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

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

Html tag video:

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

          </video> 

di quanto si può utilizzare onclick javascript per fare qualcosa in funzione della variabile di stato in questo caso videoPlaying.

speranza che questo aiuta ...