HTML5的JS播放按钮在iOS手机上不起作用

Question

我正在尝试在移动iOS上播放HTML5视频。桌面&安卓运行良好。单击按钮进入全屏模式并播放视频。我看到一些报告说，尽管视频缩略图正在加载，但有些人根本无法点击按钮。目前细分为：

• iOS 16.0.2不工作
• iOS 15.2.1可以使用safari，但不能使用firefox或chrome

HTML代码段`

<div class="video-player">
<video loop="true" width="400px" preload="auto" playsinline="true" controls="true">
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.webm" type="video/webm" />
<p>Your browser doesn't support HTML5 video. Here is
a <a href="media/video.mp4">link to the video</a> instead </p>
</video>
<button><img src="img/play_video.svg"></button>
</div>

中的脚本

/* Get elements */
var brimmingVideo = document.querySelector('#brimming .video-player video');
var brimmingFullscreen = document.querySelector('#brimming .video-player button');
var brimmingIcon = document.querySelector('#brimming .video-player button img');
/* Build out functions */
// toggle play/pause
function brimmingtogglePlay() {
var method = brimmingVideo.paused ? 'play' : 'pause';
brimmingVideo[method]();
}
// Create fullscreen video button
function brimmingtoggleFullscreen() {
if (brimmingVideo.requestFullScreen) {
brimmingVideo.requestFullScreen();
brimmingtogglePlay();
} else if (brimmingVideo.webkitRequestFullScreen) {
brimmingVideo.webkitRequestFullScreen();
brimmingtogglePlay();
} else if (brimmingVideo.mozRequestFullScreen) {
brimmingVideo.mozRequestFullScreen();
brimmingtogglePlay();
} else if (vid.webkitEnterFullscreen) {
vid.webkitEnterFullscreen();
}
;
brimmingVideo.controls = true;
brimmingVideo.muted = false;
brimmingIcon.className = "hide";
}
// what happens when you exit fullscreen
function brimmingexitHandler() {
if (document.webkitIsFullScreen === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
} else if (document.mozFullScreen === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
} else if (document.msFullscreenElement === false) {
brimmingtogglePlay();
brimmingVideo.muted = true;
brimmingVideo.controls = false;
}
}
/* Hook up event listeners */
// Click events
brimmingFullscreen.addEventListener('click', brimmingtoggleFullscreen);
// Exit fullscreen event
brimmingVideo.addEventListener('fullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('mozfullscreenchange', brimmingexitHandler, false);
brimmingVideo.addEventListener('MSFullscreenChange', brimmingexitHandler, false);
brimmingVideo.addEventListener('webkitfullscreenchange', brimmingexitHandler, false);

`

Answer 1

有三件事导致了这个问题：

1. 在javascript中，删除return false；事件侦听器的。

2. 在样式表中，调用操作的元素必须具有属性cursor:pointer；。也许苹果在这些用户界面最佳反馈的呼吁中提出了这一要求。

3. 同样，在样式表中，我们不能设置display:none；因为有些浏览器不接受点击未显示的元素。(这不适用于你(

此外，一般规则是"；抓；只有在加载DOM之后才有DOM元素！