Vue+video.js implements video playlist

Vue+video.js implements video playlist

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.
For more information about Video.js settings, please click here

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:
  • How to use the vue-video-player plugin for vue video playback
  • Vue uses video.js for video playback
  • Example of how to play m3u8 video stream with Vue combined with Video.js
  • Vue video playback pause code
  • Detailed configuration of vue-video-player video player
  • vue + typescript + video.js to realize streaming video monitoring function
  • How to solve the m3u8 video playback format through vue video.js
  • vue-dplayer video player example code
  • Vue uses the video tag to implement video playback
  • How to use h5 video tag in Vue to play local video in pop-up window

<<:  Docker View Process, Memory, and Cup Consumption

>>:  Set IE8 to use IE7 style code

Recommend

The implementation of Youda's new petite-vue

Table of contents Preface Introduction Live Easy ...

UrlRewriter caching issues and a series of related explorations

When developing a website function, the session c...

Use crontab to run the script of executing jar program regularly in centOS6

1. Write a simple Java program public class tests...

Detailed explanation of HTML table inline format

Inline format <colgroup>...</colgroup>...

Vue+js realizes video fade-in and fade-out effect

Vue+js realizes the fade in and fade out of the v...

MySQL UNION operator basic knowledge points

MySQL UNION Operator This tutorial introduces the...

Linux C log output code template sample code

Preface This article mainly introduces the releva...

Detailed explanation of Getter usage in vuex

Preface Vuex allows us to define "getters&qu...

Summary of CSS gradient effects (linear-gradient and radial-gradient)

Linear-gradient background-image: linear-gradient...

Detailed analysis of the difference between Ref and Reactive in Vue3.0

Table of contents Ref and Reactive Ref Reactive T...

Json advantages and disadvantages and usage introduction

Table of contents 1. What is JSON 1.1 Array liter...

How to make full use of multi-core CPU in node.js

Table of contents Overview How to make full use o...