admin管理员组

文章数量:1794759

多个视频文件在HTML5中连续播放代码

多个视频文件在HTML5中连续播放代码

多个视频文件在HTML5中连续播放代码 近来在家学习观察多个学习平台中的提供的视频文件（包含幕课、微课），它们插放的时间在10分钟之内，这样的短视频播放需要客户不停切换选择，很是麻烦，往往让学习人员失去学习的兴趣。 今天试写了一段代码将多个小视频文件在网页页面中不间段连续播放，代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多个视频连续播放</title> <style type="text/css"> .div1{text-align:center;width:100%;} </style> </head> <body> <div class="div1"> <video width="500" height="300" controls="controls" poster="test.jpg" id="myvideo"> <source src=".//video//a1.mp4" type="video/mp4"> </video> </div> <script> var vList = ['.//video//a4.mp4','.//video//a1.mp4', './/video//a2.mp4', './/video//a3.mp4']; // 初始化播放列表 var vLen = vList.length; var curr = 0; var video = document.getElementById("myvideo"); video.addEventListener('ended', function () { play(); }); function play() { video.src = vList[curr]; video.load(); video.play(); curr++; if (curr >= vLen) { curr = 0; } } </script> </body> </html>

这个代码只是解决连接播放问题，如果在你的学习平台中，添加视频学习资源的复选选择接口，让学习人员在进入阶段学习之前进行 选择，再通过上面的代码将多个视频连续播放承现给客户，那么用户体验会更好。 希望对开发的朋友有帮助哟。

本文标签： 多个视频文件连续播放代码

版权声明：本文标题：多个视频文件在HTML5中连续播放代码 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686633874a88809.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。