如何修改现有脚本实现不同站点嵌入式视频播放完毕后自动连续播放
多平台嵌入式视频连续顺序播放实现方案
直接替换你现有代码即可,已适配你列出的所有视频平台,支持按列表顺序自动播放下一个视频:
<div id="random_player"></div> <script> // 播放列表,已补充各平台API启用和自动播放参数 var videos = [ "https://www.dailymotion.com/embed/video/x7raxfh?queue-enable=false&api=1&autoplay=1", "https://ok.ru/videoembed/3188453542586?autoplay=1&jsapi=1", "https://www.youtube.com/embed/X3wV5ydVewY?enablejsapi=1&autoplay=1" ]; // 当前播放的视频索引,从第一个开始 var currentIndex = 0; var player; window.onload = function () { var playerDiv = document.getElementById("random_player"); player = document.createElement("IFRAME"); // 给iframe添加自动播放授权 player.setAttribute('allow', 'autoplay; fullscreen'); player.setAttribute('width', '640'); player.setAttribute('height', '390'); // 加载第一个视频 player.setAttribute('src', videos[currentIndex]); playerDiv.appendChild(player); // 监听视频播放结束事件 window.addEventListener('message', function(e) { var isEnded = false; // 匹配不同平台的结束事件 if (e.data) { // YouTube结束事件 if (e.data.event === 'onStateChange' && e.data.info === 0) { isEnded = true; } // Dailymotion结束事件 else if (e.data.event === 'ended') { isEnded = true; } // OK.ru结束事件 else if (e.data.eventName === 'player.ended') { isEnded = true; } } if (isEnded) { // 索引+1,切换到下一个 currentIndex++; // 所有视频播放完后回到第一个循环播放,不需要循环就把下面两行改成return即可 if (currentIndex >= videos.length) { currentIndex = 0; } // 加载下一个视频 player.setAttribute('src', videos[currentIndex]); } }); }; </script>
关键修改说明
- 移除了原有的随机取视频逻辑,新增了
currentIndex变量按顺序记录当前播放的视频位置 - 给所有视频嵌入链接补充了对应平台的JS API启用参数和自动播放参数,保证可以监听到播放结束事件
- 给iframe添加了自动播放授权属性,避免浏览器拦截自动播放
- 新增了跨域消息监听器,识别不同平台的播放结束回调,触发后自动加载下一个视频
注意事项
- 受浏览器自动播放策略限制,用户需要先点击页面任意位置触发一次交互后,后续视频才能正常自动播放,这是浏览器的安全限制,无法绕过
- 如果不需要循环播放,只需要在播放结束的判断逻辑里,判断
currentIndex >= videos.length时直接写return即可,不需要重置索引
内容的提问来源于stack exchange,提问作者Noobie-000
相关产品推荐
相关产品推荐

