本篇文章给大家带来的内容是关于如何利用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>
相关推荐:
怎样实现HTML5播放视频流或者播放视频列表?_html/css_WEB-ITnose
Atas ialah kandungan terperinci 如何利用videojs实现视频列表循环播放(完整代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

Fungsi JavaScript mudah digunakan untuk memeriksa sama ada tarikh sah. fungsi isvaliddate (s) { var bits = s.split ('/'); var d = tarikh baru (bit [2] '/' bits [1] '/' bits [0]); kembali !! (d && (d.getmonth () 1) == bit [1] && d.getdate () == nombor (bit [0])); } // ujian var

Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit. // Sediakan $ ("div.header"). css ("margin", "10px"); $ ("div.header"). css ("padding", "10px"); Anda mungkin menganggap kod ini

Artikel ini meneroka sepuluh tab jQuery yang luar biasa dan akordion. Perbezaan utama antara tab dan akordion terletak pada bagaimana panel kandungan mereka dipaparkan dan tersembunyi. Mari kita menyelidiki sepuluh contoh ini. Artikel Berkaitan: 10 JQuery Tab Plugin

Temui sepuluh plugin jQuery yang luar biasa untuk meningkatkan dinamisme dan daya tarikan visual laman web anda! Koleksi ini menawarkan pelbagai fungsi, dari animasi imej ke galeri interaktif. Mari kita meneroka alat yang berkuasa ini: Posting Berkaitan: 1

HTTP-CONSOLE adalah modul nod yang memberi anda antara muka baris arahan untuk melaksanakan arahan HTTP. Ia bagus untuk menyahpepijat dan melihat apa yang sedang berlaku dengan permintaan HTTP anda, tanpa mengira sama ada mereka dibuat terhadap pelayan web, Serv Web

Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y

Coretan kod jQuery berikut boleh digunakan untuk menambah bar skrol apabila kandungan div melebihi kawasan elemen kontena. (Tiada demonstrasi, sila salin terus ke Firebug) // d = dokumen // w = tetingkap // $ = jQuery var contentArea = $ (ini), Wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), Divheight = $ ('#c


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

Dreamweaver CS6
Alat pembangunan web visual
