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
Port Mapping Before the Docker container is start...
This article mainly introduces the example of imp...
CSS scroll bar style modification code .scroll::-...
Table of contents Introduction to Anaconda 1. Dow...
There are two ways to disable form submission in ...
Vue calls the PC camera to take pictures in real ...
Table of contents 1. Install the psutil package S...
1. CDN It is the most commonly used acceleration ...
Here I use samba (file sharing service) v4.9.1 + ...
Table of contents 1. Discover the problem 2. Dele...
I believe everyone has played scratch tickets. Wh...
Virtual hosts use special software and hardware t...
Preface When I was working on a project recently,...
In order to facilitate the storage and access of ...
introduction If you are familiar with using JDBC ...