如何利用videojs实现视频列表循环播放（完整代码）

来源：动视网责编：小采时间：2020-11-27 19:30:50

如何利用videojs实现视频列表循环播放（完整代码）

如何利用videojs实现视频列表循环播放（完整代码）:本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head> <meta charset="u

推荐度：

点击下载本文 文档为doc格式

导读如何利用videojs实现视频列表循环播放（完整代码）:本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head> <meta charset="u

本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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>

如何利用videojs实现视频列表循环播放（完整代码）

推荐度：

点击下载本文 文档为doc格式

标签：播放实现代码

热门焦点

如何利用videojs实现视频列表循环播放（完整代码）

如何利用videojs实现视频列表循环播放（完整代码）

如何利用videojs实现视频列表循环播放（完整代码）

最新推荐

猜你喜欢

热门推荐