Detectar se o elemento de vídeo HTML5 está a reproduzir
Este é o meu código actual:
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");
}
}
}
13 answers
Nota: esta resposta foi dada em 2011. Por favor, verifique a documentação atualizada sobre o vídeo HTML5 antes de prosseguir.
Se só quiser saber se o vídeo está em pausa, use a bandeira {[[0]}.
Não existe nenhuma propriedade para o elemento de vídeo para obter o estado de reprodução. Mas há um evento "playing" que será despoletado quando começar a jogar. O evento "ended" é despoletado quando ele pára de tocar.
Então a solução é
-
Decalre um. variável videoStatus
- adicionar manipuladores de eventos para diferentes eventos de vídeo
- actualizar videoStatus usando os manipuladores de eventos
- usar videoStatus {[4] } para identificar o estado do vídeo
http://www.w3.org/2010/05/video/mediaevents.html
A minha resposta em Como dizer se um elemento :MediaElement não tem uma propriedade que diga se está a jogar ou não. Mas você poderia definir uma propriedade personalizada para ele.
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Agora pode usá-lo em video ou audio elementos como este:
if(document.querySelector('video').playing){
// Do anything you want to
}
jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});
Adicione os ouvintes de eventos ao seu elemento mediático. Os possíveis eventos que podem ser despoletados são: eventos de áudio e vídeo
<!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>Encontrei um problema semelhante em que não fui capaz de adicionar ouvintes de eventos ao jogador até Depois de já ter começado a tocar, por isso o método do @Diode, infelizmente, não iria funcionar. A minha solução era verificar se a propriedade do jogador "em pausa" estava definida como verdadeira ou não. Isso funciona porque " paused "é definido como verdadeiro mesmo antes do vídeo começar a tocar e depois de terminar, não apenas quando um usuário clicou em"pause".
Acabei de ver o link @tracevipin Adicionado ( http://www.w3.org/2010/05/video/mediaevents.html e vi uma propriedade chamada "pausa".
Testei-o e funciona muito bem.Este é o meu código - chamando a função play() o vídeo toca ou pára e a imagem do botão é alterada.
Chamando a função volume() o volume Está ligado / desligado e a imagem do botão também muda.
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';
}
}
Um pequeno exemplo
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}Eu apenas fiz isso muito simplesmente usando onpause e onplay propriedades da tag de vídeo html. Crie alguma função javascript para comutar uma variável global para que a Página saiba o estado do vídeo para outras funções.
Javascript abaixo:
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Marca De Vídeo Html:
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
Do que você pode usar o onclick javascript para fazer algo dependendo da variável de status neste caso videoPlaying.
Espero que isto ajude...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");
}
}
A <video> está a jogar se {[[1]}, desde que o giro de slithy toves mas ainda não começou a gimbling, os borogoves existem e são um pouco, mas não todos mimsy, e os Raths de mome estão entre os seus ciclos de suborno, o que significa que eles não estão actualmente a ultrapassar, mas já o fizeram pelo menos uma vez no passado.
Https://www.w3.org/TR/2011/WD-html5-20110113/video.html#playing-the-media-resource