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

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

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

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

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

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

二、然后想预载入多个video标签，每个video tag设置所要循环的src，第一个要播放的video设置正常的宽高,play()， z-index :0。其他video tag设置width:1pxheight: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]

这需要用js来写了，需要动态创建video，例如

var vList = ['视频地址url1', 'url2', '...']// 初始化播放列表

var vLen = vList.length// 播放列表的长度

var curr = 0// 当前播放的视频

var video = new Video()

video.addEventListener('end', play)

play()

function play(e) {

video.src = vList[curr]

video.load()// 如果短的话，可以加载完成之后再播放，监听 canplaythrough 事件即可

video.play()

curr++

if (curr >= vLen) curr = 0// 播放完了，重新播放

}

<script>

window.onload = function(){ //页面加载完成执行

var images = document.getElementsByTagName('img')//取得所有img图片

var pos = 0//定义pos变量初始值=0

var len = images.length//取得图片个数

setInterval(function(){//定每1秒时执行

images[pos].style.display = 'none'//第一个图片隐藏,

pos = ++pos == len ? 0 : pos//pos在图片个数范围内递增

images[pos].style.display = 'inline'//下一个图片显示

},1000)

}

</script>

---