全屏播放时，iOS Safari上不会触发视频touchevent

时间：2019-10-29 03:40:36

标签： javascript ios html5-video mobile-safari html5-fullscreen

在iPad Safari上，ios版本13.1.3

我尝试使用香草js向视频元素添加触摸事件监听器。该事件通常在非全屏模式下触发。但是一旦将模式更改为全屏模式，就无法再触发触摸事件。

我在野生动物园的Web检查器中也遇到了以下控制台错误。

enter image description here

我发现诸如video.js之类的视频播放器框架可以防止此问题。但是我想知道为什么会发生这种情况，以及如何使用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>

1 个答案:

答案 0 :(得分：0)

这是因为本机视频控件正在干扰触摸事件。您无需通过controls选项。

请参阅：

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

iPad touch events on <video> tag

您可以通过以下方式实现自己的控件：

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

相关问题
最新问题