JavaScript实现视频轮流播放

最新推荐文章于 2024-06-29 22:58:02 发布

构建

最新推荐文章于 2024-06-29 22:58:02 发布

阅读量3k

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44560342/article/details/88357587

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

JavaScript实现视频轮流播放


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>Video.js 7.4.1</title>
</head>

<body>
    <div style="margin:10%">
        <video id="myVideo" controls="controls" autoplay="autoplay" style="width:873px;height:453px" muted>
            <source id="myVideo1" src="~/Areas/trailer.mp4" type="video/mp4" />
        </video>
    </div>
    <script>
        var md = document.getElementsByTagName("video")[0];
        var s = Array('/Areas/movie1.MP4', '/Areas/trailer.mp4');//路径
        var s1 = 0;
        md.addEventListener("ended", function () {//属性返回音频/视频是否已结束。
            console.log("结束");
            md.load();//重新加载视频元素。
            document.getElementById('myVideo1').src = '' + s[s1] + '';//清空路径
            s1++;
            if (s1 == s.length) {
                s1 = 0;
            }
        })
    </script>
</body>
</html>

效果图

在这里插入图片描述

构建

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
JavaScript实现视频轮流播放

JavaScript实现视频轮流播放@{ Layout = null;}&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Video.js 7.4.1&lt;/title&gt;&lt;/head&gt;&a
复制链接

扫一扫