Der Inhalt dieses Artikels befasst sich mit der Verwendung von Videojs zur Implementierung der Videolisten-Loop-Wiedergabe (vollständiger Code). Ich hoffe, dass er für Sie hilfreich ist.
<!DOCTYPE html>
<html>
<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>
<div>
<div class="dp-tit-btn btn6">
庭审直播
</div>
</div>
<!-- 简介 -->
<div>
<div>
<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>
<ul>
<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>Nach dem Login kopieren
Verwandte Empfehlungen:
Wie implementiert man einen HTML5-Wiedergabevideostream oder eine Wiedergabevideoliste? _html/css_WEB-ITnose
So fügen Sie den Webvideocode hinzu, um die nächste Episode automatisch abzuspielen
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Videojs, um die Wiedergabe einer Videolistenschleife zu implementieren (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
