HTML 如何让几个视频连续并循环播放,给段代码

Posted 2023-04-18

例如我有3个文件 1.avi 2.avi 3.avi
先播放1.avi，然后播放2.avi，最后播放3.avi，3.avi播放完成后，再播放1.avi。。。。。。。循环播放。

提前buffer好就行。 play本身是没有卡顿的。又不是播放什么特殊的东西。

基本没有无缝播放这种需求，因为这对用户影响也太大了这。转折的时候pause 个一秒才是正常的吧。

你想啊， 前面一个特别柔和，后面一段特别激烈，不给用户一点时间，人家直接受不了就关了。。。。

如果是一部视频分两段，请好好streaming。。。

一、首先用js监听ended事件，然后更改src，再play。此方法出现题主所说的卡顿，没法无缝循环。

二、然后想预载入多个video标签，每个video tag设置所要循环的src，第一个要播放的video设置正常的宽高,play()， z-index :0。其他video tag设置width:1px;height:1px;并且暂停(preload)，监听播放中的video ended，改变width和height，设置为1px;，把下一个播放的video tag设置成正常宽高，z-index 0；   这个方法没有实际测试，目测流行浏览器下应该是可行的，但是微信浏览器等定制类的估计不行，video tag会被自动最大化。

三、如果服务器允许跨域和设置cors，使用flv.js的多来源播放flv应该是可行的，flv.js或者其他非video tag播放器，都使用ajax的xhr或者fetch来获取视频片段数据，只是获取片段需要知道range，服务器的cors策略要支持range和length，可惜我用的是第三方服务器，自己设置不了cros。

参考资料

知乎.知乎[引用时间2018-1-3]

参考技术A

在html中可以直接这样写

 <<a href="https://www.baidu.com/s?wd=video&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="baidu-highlight">video</a> id="<a href="https://www.baidu.com/s?wd=video&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank"class="baidu-highlight">video</a>1" width="420" style="margin-top:15px;">
    <source src="/example/<a href="https://www.baidu.com/s?wd=html5&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="baidu-highlight">html5</a>/mov_bbb.mp4" type="<a href="https://www.baidu.com/s?wd=video&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="baidu-highlight">video</a>/mp4" />
    <source src="/example/<a href="https://www.baidu.com/s?wd=html5&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="baidu-highlight">html5</a>/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support <a href="https://www.baidu.com/s?wd=HTML5&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="baidu-highlight">HTML5</a> video.
  </video>

参考技术B 你好，在html中可以直接这样写

1
2
3
4
5

<video id="video1" width="420" style="margin-top:15px;">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
<source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>

　　他会自动按顺序播放视频文件

　　希望可以帮助到你 参考技术C

　　你好，在html中可以直接这样写

  <video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>

　　他会自动按顺序播放视频文件

　　希望可以帮助到你

追问

IE版本低不支持，不能让用户为了使用都升级ie。不过还是谢谢了

追答

那就用js做播放器吧，设置src就可以了，然后监控它的播放

var myVideo=document.getElementById("video1");
function playPause()
 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 

参考技术D 楼主为什么不合并三个视频呢？追问

我做的是web项目，文件是上传的，然后在页面上循环播放这些文件

追答

要不你用JS把三个视频放在数组里面，然后去取出来就行了；

追问

那怎么判断那个视频播放完了？？

HTML5 视频不会在 Android 设备上循环播放

【中文标题】HTML5 视频不会在 Android 设备上循环播放

【英文标题】：HTML5 video will not loop on Android devices

【发布时间】：2012-06-28 20:50:36

【问题描述】：

经过几个小时的尝试，我想问一下如何使用 HTML5 视频标签在 Android 设备上循环播放视频。

为了独立于某种浏览器，我包含了 video.js 来播放视频。在 Firefox 和 Chrome 上一切正常，但在我的 Android 设备（带有 Android 4.0.4 的 SSG3）上，视频无法启动或循环播放。

<video id="model_video" autoplay loop preload="auto" data-setup=""    poster="images/black.jpg"> 

没有开始播放视频。但这很容易通过在 JS 中调用 video.start() 来解决。但是循环不适用于此。即使似乎支持循环属性，它也会导致问题。使用属性 loop=false 或者即使缺少 loop 属性，它仍然设置为 true。

有几个网站指出需要添加事件监听器。但不幸的是，它没有奏效。

【参考方案1】：

解决方法是使用JS将loop属性设置为false。即使将 loop=false 作为视频标签的属性或缺少循环属性，video.loop 也会返回 true。所以为了完成循环，下面的 sn-p 做到了：

    var video = document.getElementById("model_video"); 
    //this did the trick
    video.loop = false; 
    video.addEventListener('ended', function()  
      video.currentTime=0.1; video.play(); , false);
    video.play();

干杯！

【讨论】：

从meta 来到这里。如果这是您问题的答案，您应该使用旁边的透明勾号图标将其标记为您的答案。