html中网页如何使用video-js进行视频循环播放

曦月合一

于 2025-04-03 10:19:16 发布

阅读量376

点赞数 2

分类专栏： html javaScript 自动播放文章标签： html javascript 音视频

本文链接：https://blog.youkuaiyun.com/qq_39951524/article/details/146973754

版权

html 同时被 3 个专栏收录

4 篇文章

订阅专栏

javaScript

3 篇文章

订阅专栏

自动播放

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link href="css/video-js.min.css" rel="stylesheet">
    <script src="js/video.min.js"></script>
	
	<style>
        body {
		    display: flex;
		    /* justify-content: center; */
		    /* align-items: center; */
		   /* height: 100vh;*/
		}
 
    </style>
	
	<body>
		<button class="qiehuan">切换</button>
		<button class="fanhui">返回</button>
		
		<video class="video-js" controls="" autoplay="" style="width: 400px; height: 300px;" id="e_video" preload="metadata">
		     <source id="source" type="video/mp4" src="">
		</video>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
	<script type="text/javascript">
	var myVid;
	var vList = [
	    "video/neitou.mp4",
	    "video/neitou.mp4"
	
	]; //视频集
var curr = 0; //播放第几个视频
var options = {
    "playbackRates": [0.25, 0.5, 1, 1.5, 2, 4, 8, 16]
}; //播放倍数

//静态用于演示
$(function() {
    $("#source").attr("src", vList[0]);
    myVid = videojs('e_video', options, function onPlayerReady() {
        this.play();
        this.on('ended', function() {

            videojs.log('Awww...over so soon?!');
            if (curr >= vList.length) {
                curr = 0; //重新循环播放
            }

            myVid.src(vList[curr]);
            myVid.load();

            console.log("curr1: " + curr);
            curr++;
            console.log("curr2: " + curr);
        });
    })
    curr++;
    console.log("curr: " + curr)
})


  $(document).on("click",".qiehuan",function(){
 
       vList = [
	    "video/dengguan.mp4",
	    "video/dengguan.mp4"
	
	    ];
       $("#source").attr("src", vList[0]);
       //e_video_html5_api标签id 是在#e_video 内部，用于展示视频
       $("#e_video_html5_api").attr("src", vList[0]);
       
   })
  
  
  $(document).on("click",".fanhui",function(){
 
       vList = [
	    "video/neitou.mp4",
	    "video/neitou.mp4"
	
	    ];
       $("#source").attr("src", vList[0]);
       //e_video_html5_api标签id 是在#e_video 内部，用于展示视频
       $("#e_video_html5_api").attr("src", vList[0]);
   })
	</script>
</html>