在没有用户干预的情况下，在iOS上依次播放视频

编程问答 2022-08-08

问题描述

我有十几个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();

}

解决方法

我没有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>
htmliosiosjavascriptvideovideo