HTML5 video的多视频循环播放，轮播视频

最新推荐文章于 2024-09-03 10:16:41 发布

xingchen678

最新推荐文章于 2024-09-03 10:16:41 发布

阅读量6.9k

点赞数 5

分类专栏： html5 vedio 文章标签： html5 vedio

原文链接：https://blog.csdn.net/qq_39364032/article/details/79744254

版权

html5 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vedio

6 篇文章 1 订阅

订阅专栏

<div class="video">
 
    <div class="container">
 
        <div class="video-details row">
 
            <h4 class="text-left color-white">初始视屏名</h4>
 
            <video src="初始视屏地址" poster="" autoplay="true" controls="true" volume="true" class="width-full" id="video-details"></video>
 
            <div class="back-index text-center"></div>
 
        </div>
 
    </div>
 
</div>

<script type="text/javascript">
 
$(window).load(function(){
 
 	var vList = [‘video1’,’video2’,’video3’]; // 播放列表
 
        var vLen = vList.length;  
 
        var curr = 0;  
 
        var myvideo = document.getElementById("video-details");  
 
        myvideo.onended = function() {
 
            myvideo.src = vList[curr];    
 
 	    var $text =  vList[curr];  
 
            myvideo.load();    
 
            myvideo.play();   
 
            curr++;   
 
            if(curr >= vLen){   
 
                curr = 0; //重新循环播放
 
            }
 
            $(".video-details h4").text($text);
 
        };
 
    })   
        
</script>