This article shares the specific code of vue+video.js to implement the video playlist for your reference. The specific content is as follows 1. Import Video.js npm install --save-dev video.js Then reference it in main.js import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$videos = Video After the citation is completed, we can make a video list 2. Use in the page Define the initial method in method initVideo(){ let elementList = document.querySelectorAll(".video-js"); this.element=elementList.length; //videojs quantity assignment for (let index = 0; index < elementList.length; index++) { let id = elementList[index].getAttribute('id'); this.$videos(id, { autoplay: false, //autoplay// muted:false, //mute or not, controls: true,//control bar// techOrder: ['html5','flash'],//set flash playback language: "en",//initialization language preload: "auto",//preload width:'400', height:'200', // playback speed playbackRates: [0.5, 1, 1.5, 2], }, function () { this.volume(0); //This is very important. Once your muted doesn't work, you must set the sound to 0 in the current video callback. //this.play(); //This is also the case. This method this.play()==autoplay has the same effect this.one("playing", function () { // Listen for playback console.log("Successfully initialized video"); }); this.one("error", function (error) { // Listen for errors console.error("Listening exception",error); }); }); } }, Mounted in mounted mounted() { this.initVideo(); }, Then uninstall it in beforeDestroy(), otherwise the page will report an error, and the video cannot be reinitialized when entering the page again beforeDestroy() { //Control the number of times you loop and destroy according to the number of nodes displayed on your page//The element here is the number of nodes I get after initialization above for (let index = 0; index < this.element; index++) { this.$videos(`myVideos${index}`).dispose() } }, Finally, I would like to present the layout of the page to you. <div v-for="(item,i) in adminList" :key="i"> <div class="mr30 mt10"> <span class="link-color fontExtraLarge">{{i+1}}、{{item.title}}</span> <video ref='video' :id="'myVideos'+i" class="video-js vjs-default-skin vjs-big-play-centered mt10" > <source :src="item.src" type="video/mp4" /> </video> </div> </div> Okay, that’s it. If you have any questions, please feel free to ask. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Docker View Process, Memory, and Cup Consumption
>>: Set IE8 to use IE7 style code
After pressing Enter on the webpage, the form is a...
Table of contents 1. typeof operator 2. instanceo...
Table of contents Preface Introduction Live Easy ...
When developing a website function, the session c...
1. Write a simple Java program public class tests...
Inline format <colgroup>...</colgroup>...
Vue+js realizes the fade in and fade out of the v...
MySQL UNION Operator This tutorial introduces the...
Preface This article mainly introduces the releva...
Preface Vuex allows us to define "getters&qu...
Linear-gradient background-image: linear-gradient...
1. Install JDK Check the computer's operating...
Table of contents Ref and Reactive Ref Reactive T...
Table of contents 1. What is JSON 1.1 Array liter...
Table of contents Overview How to make full use o...