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