JavaScript实现视频轮流播放

落日映苍穹つ 2022-03-09 21:23 360阅读 0赞

**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>

效果图

![在这里插入图片描述][20190308200828982.gif]

[20190308200828982.gif]: /images/20220310/cf0f0b9d300247ec8e42d79ede70f316.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 VLC 实现视频播放

用vlc来实现视频，其下载地址为：[http://download.videolan.org/pub/videolan/vlc/][http_download.video...

矫情吗；*/ 2024年04月18日 07:07/ 0 赞/ 93 阅读

相关 Vue实现视频播放

1.使用html的video标签(适合pc端，支持Ogg、MPEG4、WebM格式) （1）安装video.js插件 cnpm install --save v

刺骨的言语ヽ痛彻心扉/ 2023年06月06日 03:54/ 0 赞/ 14 阅读

相关 Qt+ffmpeg实现视频流播放

1.版本 Qt版本：5.11 64位 ffmpeg版本：>3.0 64位 2.实现思路 ffmpeg拉流、解码，因为Qt不支持显示yuv数据，需要ffmpeg转

向右看齐/ 2023年01月15日 02:20/ 0 赞/ 331 阅读

相关 QT+Opencv实现视频流播放

1.简单流程首先通过opencv打开视频流，获取到数据帧，然后将数据帧转换为QT可识别的图像，显示到QT界面上。 2.opencv解码线程源码 //D

左手的ㄟ右手/ 2022年12月10日 02:26/ 0 赞/ 378 阅读

相关 java canvas类播放视频教程_canvas实现视频播放

Examples 点击播放 var imgArr = \[\], source = \{\}, now2 = 0, imgNum = 0, timer = null

╰+攻爆jí腚メ/ 2022年11月05日 00:39/ 0 赞/ 267 阅读

相关 Android 实现视频录制并播放

AndroidManifest.xml： <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:and

柔光的暖阳◎/ 2022年08月17日 14:18/ 0 赞/ 344 阅读

相关 Android WebView 播放视频实现横屏全屏播放

用webiew播放视频时，要想点击全屏按钮实现全屏播放，播放腾讯视频和播放其他视频的机制不同，针对这两种机制，下面分别给出横屏全屏播放的方法。（一）全屏播放腾讯视频（需要用

小灰灰/ 2022年05月21日 11:47/ 0 赞/ 506 阅读

相关 JavaScript实现视频轮流播放

JavaScript实现视频轮流播放 @{ Layout = null; } <!DOCTYPE html>

落日映苍穹つ/ 2022年03月09日 21:23/ 0 赞/ 361 阅读

相关 HTML网页实现flv视频播放

一、HTML代码如下： <div id="player"></div> 二、JavaScript代码如下： <script src="http://cdn

一时失言乱红尘/ 2021年10月24日 04:54/ 0 赞/ 713 阅读

相关视频播放组件

import React, \{Component\} from 'react'; import \{View, Dimensions, Image, Text, Slid

Bertha 。/ 2021年09月19日 13:48/ 0 赞/ 620 阅读