在 iOS 上一个接一个地播放视频，无需用户交互

Question

我有十几个 HTML5 视频，每次视频结束时我都想一个接一个地播放。用户在第一个视频按下“播放”按钮，其他视频依次播放。

我的代码在桌面和 android 上运行良好，但由于自动播放限制，在 iOS 上运行不佳。如果用户不按第二个按钮，我无法让第二个视频在第一个视频之后播放。

是否有解决方法可以在 iOS 上一个接一个地播放视频，或者我是否必须创建一个例外来为每个视频显示一个“播放”按钮？

到目前为止我的代码是什么样子的：

<video id="firstVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
   <source src="videos/video1.mp4" type='video/mp4'>
</video>
<video id="secondVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
    <source src="videos/video2.mp4" type='video/mp4'>
</video>

等...

if ( video1.currentTime >= video1.duration - 0.1 ) {

    video1.pause();
    video2.play();

}

Answer 1

我没有 iOS 设备所以让我知道这个测试代码是否适用于顺序播放...

<!DOCTYPE html>
<html>
<body>

<video id="firstVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
   <source src="videos/video1.mp4" type='video/mp4'>
</video>

<video id="secondVideo" crossOrigin="anonymous" webkit-playsinline playsinline style="display:none" preload="auto">
    <source src="videos/video2.mp4" type='video/mp4'>
</video>

<br> <br>
<button onclick="vidPlay()"> Test Play </button>


<script type='text/javascript'>

const vid1 = document.getElementById('firstVideo');
const vid2 = document.getElementById('secondVideo');

vid1.addEventListener('ended', myVidEnd_Handler, false);

function vidPlay()
{
    vid1.play(); //# play first vid
    vid2.play(); vid2.pause(); //# temp trigger playback with immediate pause
}

function myVidEnd_Handler(e) 
{  vid2.play(); }

</script>
</body>
</html>

在 iOS 上一个接一个地播放视频，无需用户交互

Play videos one after another on iOS without user interaction

html

javascript

video

ios