video标签实现多个视频循环播放
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | < head > <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </ head > < body > < video id="myvideo" width="100%" height="auto" controls="controls" muted> <!-- 加muted 是为了可以实现自动播放 --> 你的浏览器不支持HTML5播放此视频 < span style="white-space:pre"> </ span > <!-- 支持播放的文件格式 --> < source src="" type='video/mp4' /> </ video > < script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></ script > < script > var video = document.getElementById("myvideo"); var vList = ['/u/www/201610/101338015yhf.mp4', '/u/www/202001/1513372485r9.mp4']; // 初始化播放列表,这里的url要用相对路径 var vLen = vList.length; var curr = 0; $(document).ready(function(){ play(); video.addEventListener('ended', function(){ play(); }); }); function play() { video.src = vList[curr]; video.load(); video.play(); curr++; if(curr >= vLen){ curr = 0; //重新循环播放 } } </ script > </ body > |
-----------------------有任何问题可以在评论区评论,也可以私信我,我看到的话会进行回复,欢迎大家指教------------------------
(蓝奏云官网有些地址失效了,需要把请求地址lanzous改成lanzoux才可以)
分类:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了