利用videojs实现视频列表循环播放,自动播放下一个

来源:csdn博客 分类: 文章浏览史 发布时间:2021-12-02 16:18:51 最后更新:2021-12-02 浏览:371
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-12-02 16:18:51
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>庭审直播</title>
    <link rel="stylesheet" href="css/base.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script src="js/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="js/iview/dist/styles/iview.css">
	<script src="js/iview/dist/iview.min.js"></script>
    <!--引入播放器样式-->
    <link href="js/videojs/css/video-js.min.css" rel="stylesheet">
    <!--引入播放器js-->
    <script src="js/videojs/js/video.min.js"></script>
    <script src="js/videojs/js/videojs-flash.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    .video-js {
   		/*  position: inherit !important; */
    }
    .video{
    	width:50%;
    	padding:0px !important;
    	float:left;
    }
    .video-div{
    	 float:left;
   		 width:45%;
   		 margin-left: 35px;
   		 background:#3e3b3b00;
    }
    .dp-center{
    	background: #403f3f;
    }
    .video-list{
   	    margin: 5px 10px 10px 10px;
	    padding: 5px 0px;
	    max-height: 330px;
	    list-style: none;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	    border-radius: 5px;
    }
    .video-list li {
	    float: left;
	    margin: 0;
	    padding-left:15px;
	    width: 175px;
	    height: 140px;
	}
	.text_align_center{
		text-align:center;
		color:#fff;
	}
	a{
	   text-decoration: none;
	}
    </style>
  </head>
<body>
	<div id="app" class="dp-item dp-item-3">
		<div class="dp-item_center">
 			<div class="dp-tit">
                <div class="dp-tit-btn btn6">
                    庭审直播
                </div>
			</div>
			<!-- 简介 -->
			<div class="dp-center">
                <div class="video">
					<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered">
    					<!-- <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">   -->
					</video>
                </div>
                
                <div class="video-div">
					<ul class="video-list">
						<li v-for="(item,index) in listItem">
							<a id="video1" href="#" title="民间借贷纠纷">
								<img v-bind:src="[item.image]" width="120px" height="80px" border="0">
								<div class="video_list_explain text_align_center">{{item.title}}</div>
								<div class="video_list_date text_align_center">{{item.dateTime}}</div>
							</a>
						</li>
					</ul>
					</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
videojs.options.flash.swf = 'js/videojs/swf/video-js.swf';

var vm = new Vue({
    el: '#app',
    data: {
        visible: false,
        listItem:[
            {title:"民间借贷纠纷1",isplay:false, type:"video/mp4", url: "http://www.w3school.com.cn/example/html5/mov_bbb.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷2", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg", dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷3", isplay:false, type:"video/mp4", url: "http://7xn4dt.com1.z0.glb.clouddn.com/migo_vedio_720.mp4", image:"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",dateTime:"2018-09-10 16:30"},
            {title:"民间借贷纠纷4", isplay:false, type:"video/mp4", url: "video/video.mp4",image:"http://vod.videoincloud.com/jsxzxyfy/20180910/55pXgd/55pXgd_m_1.jpg", dateTime:"2018-09-10 16:30"},
        ]
    },
    mounted:function(){
    	this.show();
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
      }
    },
    methods: {
        show: function () {
            this.visible = true;
        }
    }
});


var list = vm.listItem;
var i = 0;
$(function(){
	var source = document.getElementById("video-source");
	var player = videojs("my-player", {
		"width":"450px",
		"height":"282px",
	    "poster":"http://vod.videoincloud.com/gz/20180911/4QW3Un/4QW3Un_m_1.jpg",
	    "autoplay":true,
	    "controls": true,
		"sources": [{
		      src: list[i].url,
		      type: list[i].type
		  }],

	}, function(){
	    this.on('loadeddata',function(){

	    })
	    this.on('ended',function(){
	    	 i++;
	         if(i >= list.length){
	            i = 0;
	          }
	          var videoObj = list[i];
	          this.src({type: videoObj.type, src: videoObj.url});
	          this.play();
	    })

	});
});

</script>	
</body>
</html>

效果图:

 

php技术微信