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

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

HTML+CSS to achieve layered pyramid example

This article mainly introduces the example of imp...

CSS scroll bar style modification code

CSS scroll bar style modification code .scroll::-...

Complete steps to install Anaconda3 in Ubuntu environment

Table of contents Introduction to Anaconda 1. Dow...

Introduction to html form control disabled attributes readonly VS disabled

There are two ways to disable form submission in ...

Vue implements calling PC camera to take photos in real time

Vue calls the PC camera to take pictures in real ...

Linux service monitoring and operation and maintenance

Table of contents 1. Install the psutil package S...

Detailed explanation of samba + OPENldap to build a file sharing server

Here I use samba (file sharing service) v4.9.1 + ...

How to filter out duplicate data when inserting large amounts of data into MySQL

Table of contents 1. Discover the problem 2. Dele...

Detailed steps for configuring virtual hosts in nginx

Virtual hosts use special software and hardware t...

Solution for front-end browser font size less than 12px

Preface When I was working on a project recently,...

How to quickly build an FTP file service using FileZilla

In order to facilitate the storage and access of ...