Vue+Video.js plays m3u8 video stream

First, we need to install video.js related dependencies in the vue project.

npm install --save video.js
npm install --save videojs-contrib-hls

Then, we need to import the css file of videojs, for example, in main.js

import 'video.js/dist/video-js.css'

Next, we introduce the js object on the page that needs to play the video

import videojs from 'video.js'
import 'videojs-contrib-hls'

Specify a video container, for example:

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
    <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL">
</video>

Finally, we initialize the player in the mounted node:

videojs('my-video', {
    bigPlayButton: false,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})

The above is the simplest implementation of the title. For more requirements, please read the video.js related api or continue to pay attention to this blog.