'Why 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>

javascript html5-video

Solution 1:^[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	tmighty

'Why does Html5 video player area react only on mouse click, but not on finger touch?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]