0
226
VistasWhy does Html5 video player area react only on mouse click, but not on finger touch?
I am trying to make it so that I can use my finger (touch) anywhere on a video player to start and stop it.
However, I can only start and stop the video if I press the audio controls with the finger:
Alternatively, I can click anywhere on the videoplayer with the mouse. This mouse click will start or stop the video.
I don't know if the problem is that a finger touch (unlike a mouse click) does not raise a certain event or if touching the video is generally not starting / stopping it, and I need a function for that.
Here is an example that I found. However, it's not working: When I click the video with the mouse, it shortly stops, then starts right again.
Thank you for any hint on what might be going on here and how to fix it.
<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>
1 Respuestas
Responde la pregunta0
I got it:
I need to react on the ontouchstart (or 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>