0

On iPad Safari, ios version 13.1.3

I tried to add touch event listener to video element using vanilla js. The event tiggers normally at non-fullscreen mode. But once I change the mode into fullscreen, I cannot trigger the touch event anymore.

I also got the following console error in the web inspector of safari.

enter image description here

I found that video player framework such as video.js prevent this problem. But I want know why this is happening and how can I solve it using vanilla js?

<body>
    <video controls width="720" src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4">
    </video>
</body>

<script type="text/javascript">
    video = document.querySelector("video");
    console.log(video);
    video.addEventListener('touchstart', (e) => {
        console.log('touched');
    })
</script>
Qiang Huang
  • 153
  • 5

1 Answers1

1

It's becuase the native video controls are interfering with the touch events. You need not pass the controls option.

See:

Touch events are not triggered on video tags on safari for iPhone

iPad touch events on <video> tag

You can implement your own controls by following:

https://www.adobe.com/devnet/archive/html5/articles/html5-multimedia-pt3.html

Michael Dimitras
  • 21
  • 3