[全屏播放时，视频触摸事件不会在iOS Safari中触发

问题描述 投票：0回答：1

在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>
javascript ios html5-video mobile-safari html5-fullscreen
1个回答
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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.