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

发布网友 发布时间：2022-04-27 05:40

我来回答

共5个回答

热心网友 时间：2022-04-23 08:41

提前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]

热心网友 时间：2022-04-23 09:59

在html中可以直接这样写

 <<a href="https://www.baidu.com/s?wd=video&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank" class="-highlight">video</a> id="<a href="https://www.baidu.com/s?wd=video&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y4njwbmyPbmvDzPvmknhRv0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EnW0LPjbYnjm4PW0LPHRvnWmzr0" target="_blank"class="-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="-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="-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="-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="-highlight">HTML5</a> video.
  </video>

热心网友 时间：2022-04-23 11:34

你好，在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>

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

　　希望可以帮助到你

热心网友 时间：2022-04-23 13:25

　　你好，在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(); 
}

热心网友 时间：2022-04-23 15:33

楼主为什么不合并三个视频呢？