vue+video. js Implementation of Video Playlist

This article example for everyone to share vue+video. js to achieve video playlist specific code, for your reference, the specific content is as follows

1. Introducing Video. js

npm install --save-dev video.js

And then referenced in main. js

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$videos = Video

After the reference is completed, we can make a video list

2. Use the

Initial method defined 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, // Automatic playback 
            //   muted:false, //  Mute or not ,
              controls: true,// Control bar 
            //   techOrder: ['html5','flash'],// Settings flash Play 
              language: "en",//  Initialization language 
               preload: "auto",//  Preloading 
               width:'400',
               height:'200',
               //  Double-speed playback 
               playbackRates: [0.5, 1, 1.5, 2],
              }, function () {
                this.volume(0);
                // This place is very important ,1 Dan yours muted  Doesn't work  , Just 1 Be sure to set the sound to in the Set Current Video Callback 0
                //this.play(); // This place is also 1 Sample  , This method this.play()==autoplay   It has the same effect 
                this.one("playing", function () {         //  Monitor and play 
                   console.log(" Video initialized successfully ");
                });
                
                this.one("error", function (error) {      //  Listening error 
                    console.error(" Monitor anomaly ",error);
                });
            }); 
        }
    },

Mount in mounted

mounted() {
    this.initVideo();
  },

Then uninstall it in beforeDestroy (), otherwise the page will report an error, and when you enter the page again, the video cannot be reinitialized

beforeDestroy() {
    // Control   See how many are displayed on your page    How many times will it be destroyed 
    //  Here's element   It's up there   I get the number of nodes after initialization 
      for (let index = 0; index < this.element; index++) {                  
              this.$videos(`myVideos${index}`).dispose()
      }  
  },

Finally, give you the layout of the page

<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>

Ok, that's it. If you have any questions, please ask them.
For more information about Video. js settings, please click here