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

最新推荐文章于 2024-07-26 15:58:30 发布

刘二光

最新推荐文章于 2024-07-26 15:58:30 发布

阅读量4.4k

点赞数 3

分类专栏：程序开发文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_43621549/article/details/121558505

版权

程序开发专栏收录该内容

30 篇文章 0 订阅

订阅专栏

多个视频文件在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>

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

刘二光

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
多个视频文件在HTML5中连续播放代码

多个视频文件在HTML5中连续播放代码近来在家学习观察多个学习平台中的提供的视频文件（包含幕课、微课），它们插放的时间在10分钟之内，这样的短视频播放需要客户不停切换选择，很是麻烦，往往让学习人员失去学习的兴趣。今天试写了一段代码将多个小视频文件在网页页面中不间段连续播放，代码如下：多个视频连续播放这个代码只是解决连接播放问题，如果在你的学习平台中，添加视频学习资源的复选选择接口，让学习人员在进入阶段学习之前进行选择，再通过上面的代码将多个视频连续播放承现给客户，那
复制链接

扫一扫