Rileva se l’elemento video HTML5 è in riproduzione

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 attuale:

var stream = document.getElementsByTagName('video'); function pauseStream() { if (stream.playing) { for (var i = 0; i  header").addClass("paused_note"); $(".paused_note").text("Stream Paused"); $('.paused_note').css("opacity", "1"); } } } 

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

Se vuoi solo sapere se il video è in pausa, usa il 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à triggersto quando inizierà a giocare. L’evento “terminato” viene triggersto quando smette di giocare.

Quindi la soluzione è

  1. decora una variabile videoStatus
  2. aggiungi gestori di eventi per diversi eventi di video
  3. aggiorna videoStatus usando i gestori di eventi
  4. usa videoStatus per 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

Mi sembra che tu possa semplicemente controllare !stream.paused .

La mia risposta su Come sapere se un elemento

MediaElement non ha una proprietà che dice se la sua riproduzione 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 puoi usarlo su elementi video o audio come questo:

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

Aggiungi eventlisteners al tuo elemento multimediale. I possibili eventi che possono essere triggersti ​​sono: Eventi multimediali audio e video

     Html5 media events    

Ho riscontrato un problema simile in cui non ero in grado di aggiungere ascoltatori di eventi al lettore fino a quando non aveva già iniziato a suonare, quindi il metodo @ Diode purtroppo non funzionava. 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”.

Ecco cosa stiamo utilizzando su http://www.develop.com/webcasts per impedire alle persone di lasciare accidentalmente la 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."; }; } 

Ho appena guardato il link @tracevipin aggiunto ( http://www.w3.org/2010/05/video/mediaevents.html ), e ho visto una proprietà chiamata “in pausa”.

Ho provato e funziona perfettamente.

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

Chiamando la funzione volume() il volume viene triggersto / distriggersto 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'; } } 

un piccolo esempio

 var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') if (audio.paused) { audio.play() } else { audio.pause() } 

L’ho fatto semplicemente usando le proprietà onpause e onplay del tag video html. Crea qualche funzione javascript per triggersre o distriggersre 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; } 

Tag video HTML:

  

di quanto tu possa usare onclick javascript per fare qualcosa a seconda della variabile di stato in questo caso videoPlaying.

spero che questo ti aiuti…

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