Estoy tratando de hacerlo para que pueda usar mi dedo (toque) en cualquier parte de un reproductor de video para iniciarlo y detenerlo.
Sin embargo, solo puedo iniciar y detener el video si presiono los controles de audio con el dedo:
Alternativamente, puedo hacer clic en cualquier parte del reproductor de video con el mouse. Este clic del mouse iniciará o detendrá el video.
No sé si el problema es que un toque con el dedo (a diferencia de un clic del mouse) no genera un evento determinado o si tocar el video generalmente no lo inicia / detiene, y necesito una función para eso.
Aquí hay un ejemplo que encontré. Sin embargo, no funciona: cuando hago clic en el video con el mouse, se detiene brevemente y luego comienza de nuevo.
Gracias por cualquier pista sobre lo que podría estar pasando aquí y cómo solucionarlo.
<html> <head><meta name="viewport" content="width=device-width"> </head> <body> <video onclick="playPause()" id="video_player" controls="controls" poster=""> <source id="video_mp4" src="file:///C:/Users/Kommunikation/Desktop/affen.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video> <script> var myVideo = document.getElementById("video_player"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> </body> </html>
Lo tengo:
Necesito reaccionar en ontouchstart (o ontouchend):
<html> <head><meta name="viewport" content="width=device-width"> </head> <body> <video ontouchstart="playPause()" id="video1" controls="controls" poster=""> <source id="somevideoID" src="file:///C:/Users/Kommunikation/Desktop/affen.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video> <script> function playPause(e) { var myVideo = document.getElementById("video1"); if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> </body> </html>