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!

  • El evento VideoJS finalizó en el inicio de Firefox
  • ¿Cómo agrego nuevo video completamente desde JavaScript?
  • ¿Por qué configurar el time de reinicio del elemento de video CurrentTime of HTML5 en Chrome?
  • Reproducir video HTML5 cuando se desplaza a
  • Evento de carga de video angular
  • Reproducir un blob de JavaScript de video dentro de Cordova / Phonegap en iOS
  • Video HTML5 "Pantalla negra" en el iPad
  • ¿Cómo puedo agregar click-to-play a mis videos HTML5 sin interferir con los controles nativos?
  • Detecta si UIWebView puede reproducir video en línea en iPhone (allowsInlineMediaPlayback)
  • Configuración de blob a la propiedad src de la label de video HTML 5 para dispositivos
  • Error de video en línea
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.