如何解决在没有用户干预的情况下,在iOS上依次播放视频
我有十几个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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。