html自动循环播放视频列表

有多个视频,一个播放完以后另一个播放,知道最后,再从头循环播放。
代码如下:

<video id="video1" class="indexBanner" autoplay>
            <!-- <source src="vedio/first.mp4" type="video/mp4" />
        <source src="vedio/second.mp4" type="video/mp4" /> --> <!-- <source src="vedio/second.ogg" type="video/ogg" /> -->
            Your browser does not support HTML5 video. </video>
            <script type="text/javascript">
                debugger;
                var vList = [ 'vedio/first.mp4', 'vedio/second.mp4' ]; // 初始化播放列表 var
                vLen = vList.length; // 播放列表的长度
                var curr = 0; // 当前播放的视频 
                var video = document.getElementById("video1");
                video.addEventListener('ended', play);
                play();
                function play() {
                    var video = document.getElementById("video1");
                    video.src = vList[curr];
                    video.load(); //如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
                    video.play();
                    curr++;
                    if (curr >= vLen)
                        curr = 0; // 播放完了,重新播放
                }
            </script>

很简单,就是简历一个数组,存放视频文件;然后对vedio设置src属性,就是逐个添加视频文件,并监听播放是否结束;结束就修改src,换成下一个视频;如此循环。

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值