javascript - reproductor - video en html
Detecta si se está reproduciendo un elemento de video HTML5 (12)
Acabo de mirar el enlace @tracevipin agregado ( http://www.w3.org/2010/05/video/mediaevents.html ), y vi una propiedad llamada "en pausa".
Lo he probado y funciona muy bien.
Revisé un par de preguntas para saber si se está reproduciendo un elemento HTML5, pero no puedo encontrar la respuesta. Miré la documentación de W3 y tiene un evento llamado "jugar", pero parece que no puedo hacerlo funcionar.
Este es mi 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");
}
}
}
Agregue eventlisteners a su elemento multimedia. Los posibles eventos que se pueden activar son: eventos de medios de audio y video
<!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>
Encontré un problema similar en el que no pude agregar detectores de eventos al reproductor hasta que ya había comenzado a reproducirse, por lo que el método de @Diode lamentablemente no funcionaría. Mi solución fue verificar si la propiedad "pausada" del jugador estaba configurada como verdadera o no. Esto funciona porque "pausado" se establece en verdadero incluso antes de que el video empiece a reproducirse y después de que finaliza, no solo cuando un usuario ha hecho clic en "pausa".
Este es mi código: al llamar a la función play() el video se reproduce o hace una pausa y se cambia la imagen del botón.
Al llamar al volume() la función volume() el volumen se activa / desactiva y la imagen del botón también 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'';
}
}
Esto es lo que estamos usando en http://www.develop.com/webcasts para evitar que las personas salgan accidentalmente de la página mientras se reproduce o se pausa el video.
$(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.";
};
}
Lo hice de forma muy simple utilizando las propiedades onpause y onplay de la etiqueta de video html. Cree alguna función de javascript para alternar una variable global para que la página conozca el estado del video para otras funciones.
Javascript a continuación:
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Etiqueta de video HTML:
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
de lo que puedes hacer onclick javascript para hacer algo dependiendo de la variable de estado en este caso videoPlaying.
espero que esto ayude...
Me parece que podrías verificar por !stream.paused .
Mi respuesta en ¿Cómo saber si un elemento <video> se está reproduciendo actualmente? :
MediaElement no tiene una propiedad que indique si se está reproduciendo o no. Pero podría definir una propiedad personalizada para él.
Object.defineProperty(HTMLMediaElement.prototype, ''playing'', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Ahora puede usarlo en elementos de video o audio como este:
if(document.querySelector(''video'').playing){
// Do anything you want to
}
un pequeño ejemplo
var audio = new Audio(''https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3'')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}
Nota: esta respuesta se dio en 2011. Consulte la documentación actualizada en video HTML5 antes de continuar.
Si solo desea saber si el video está en pausa, use la stream.paused .
No hay propiedad para el elemento de video para obtener el estado de reproducción. Pero hay un evento "jugando" que se activará cuando comience a jugar. El evento "terminado" se activa cuando deja de reproducirse.
Entonces la solución es
- decalre una variable videoStatus
- agregar controladores de eventos para diferentes eventos de video
- actualizar videoStatus usando los controladores de eventos
- usa videoStatus para identificar el estado del video
Esta página te dará una mejor idea sobre los eventos de video. Reproduzca el video en esta página y vea cómo se desencadenan los eventos.
http://www.w3.org/2010/05/video/mediaevents.html
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");
}
}
jQuery(document).on(''click'', ''video'', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});