html5 onClick alternar haciendo clic en controles

Agregué un oyente de events a mi elemento de video para que los usuarios puedan reproducir o pausar el video haciendo clic en cualquier parte del elemento. Noté que el evento se dispara incluso cuando hago clic en los controles de video (como cambiar el control deslizante del volumen), lo cual obviamente no era mi intención.

¿Hay una solución relativamente simple para esto?

One Solution collect form web for “html5 onClick alternar haciendo clic en controles”

Puede manejar el evento onclick del elemento de video con una function que acepta un argumento de evento. Este argumento de evento se completará con una gran cantidad de datos sobre el clic del mouse, incluida su position X / Y en la capa (que debería ser la label de video)

Desde allí, puede activar su evento de reproducción / pausa solo cuando el clic esté en ciertas áreas del video. He incluido un ejemplo a continuación donde manejamos clics en todas partes del video, excepto en los 50 píxeles inferiores.

document.getElementById("videoElement").onclick = function(ev){ var vid = document.getElementById("videoElement"); var heightOfControls = 50; // You'll have to figure out a good height to use for your unclickable region where the controls are. // I used 50 pixels as an example. var areaAboveControls = vid.height - heightOfControls; // the layerY attribute of the event lets us know where the mouse was within the topmost layer when the click occurnetworking. // Using this we can find out where we are in the video and react accordingly. // Remember that 0 is at the top of the screen on the Y axis, so we need to use greater than to find out if it's BELOW // our area above the controls. if(ev.layerY > areaAboveControls) { alert("Clicked controls!"); } else { alert("Did not click controls"); // Raise play/pause event from here since the controls won't handle the event and we can safely toggle play/pause. } }; 

Con un poco de experimentación, debería ser capaz de encontrar un buen valor para heightOfControls que le brinde el comportamiento que está buscando.

Fiddle: http://jsfiddle.net/hTYck/4/

¡Espero que esto ayude!

  • nodejs a <video> streaming usando WebRTC
  • Llamar a la function de controller AngularJS cuando termine el video html5
  • Cómo jugar video html5? Cuando el file es file.m4v?
  • Video HTML5 completamente receptivo
  • ¿Cómo cambiar el atributo del cartel de la label de video con javascript?
  • ¿Utiliza dinámicamente el primer fotogtwig como póster en video HTML5?
  • ¿Transmitir getUserMedia a un server de Icecast?
  • drawImage en canvas de un marco de video cambia el tono
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.