


How to use videojs to implement video list loop playback (complete code)
The content of this article is about how to use videojs to implement video list loop playback (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!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>
Related recommendations:
How to implement HTML5 video streaming or video list playback? _html/css_WEB-ITnose
How to add the web video code to automatically play the next episode
The above is the detailed content of How to use videojs to implement video list loop playback (complete code). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics





Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...
