How to use vue-video-player to achieve live broadcast

CDN method, directly introduce the file in the HTML file header:
  <link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
  <script type="text/javascript" src="path/to/video.min.js"></script>
  <script type="text/javascript" src="path/to/vue.min.js"></script>
  <script type="text/javascript" src="path/to/dist/vue-video-player.js">
  </script>
    <script type="text/javascript"> Vue.use(window.VueVideoPlayer)
  </script>

NMP installation plugin:
  npm install vue-video-player --save
    npm install videojs-contrib-hls --save

Introduce the basic style file in main.js:
// Import videoPlayer style import 'video.js/dist/video-js.css'
    

Import on demand:
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'

components:
    videoPlayer
},    
 
Global import:
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player' 
// Import custom styles and add the corresponding class name in <video-player>, such as video-player-custom
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* { 
 options: global default configuration,
   events: global videojs events}*/)

<template>
  <!-- playsinline: Set the player to not be full screen on mobile devices [ Boolean, default: false ] -->
  <!-- customEventName: custom state change event name [String, default: 'statechanged'] -->
    <video-player
    class="video-player-custom"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay"
        @pause="onPlayerPause"
        @ended="onPlayerEnded"
        @ready="playerReadied"
        @statechanged="playerStateChanged"
        @playing="onPlayerPlaying"
        @waiting="onPlayerWaiting"
        @loadeddata="onPlayerLoadeddata"
        @timeupdate="timeupdate"
        @canplay="onPlayerCanplay"
        @canplaythrough="onPlayerCanplaythrough">
    </video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
   components:
        videoPlayer
    },
  data() { 
    return {
       playerOptions: { 
         // Is it muted: true,
                  // The default is English, set to Chinese language: 'zh-CN',
                  // Playback speed. After specifying it, Video.js will display a control (a control of the vjs-playback-rate class) to allow the user to select the playback speed playbackRates: [0.5, 1.0, 1.5, 2.0],
                  // Put the player into smooth mode and use this value when calculating the dynamic size of the player, indicating the aspect ratio aspectRatio: '4:3',
             // Compatibility order, the default value is ['html5'], other registered technologies will be added after this technology in the order in which they were registered.
                  techOrder: ['html5'],
                  // Equivalent to a set of <source> subtags in the native <video> tag, which can achieve graceful degradation; the type attribute specifies the MIME type of the media resource sources: [
                        //{
                    	  //type: "video/mp4",
                    	  //src: ""
                  	//},
                        //{
                    	  //type: "rtmp/flv",
                    	  //src: ""
                  	//},
                   	{
                     	  type: "application/x-mpegURL",
                     	  src: "https://live.cgtn.com/1000/prog_index.m3u8"
                   	},
                   ],
                  // Video cover poster: require('./icon/cover.jpg'),　
      }
    }
  },
  computed: { 
    	//Plugin node is used to add custom button events player() { 
      return this.$refs.videoPlayer.player 
    }
  },
    mounted() {},
    methods: {
        // Play callback onPlayerPlay(player) {
        },
        // Pause callback onPlayerPause(player) {
          //console.log(player)
        },
        //Video playback ends callback onPlayerEnded(player) {
          //console.log(player)
        },
        // readyState changes on DOM element cause playback to stop onPlayerWaiting(player) {
          //console.log(player)
        },
        // Playback has started callback onPlayerPlaying(player) {
          //console.log(player)
        },
        // When the player downloads data at the current playback position, onPlayerLoadeddata($event) is triggered {
          //console.log($event)
        },
        // Triggered when the current playback position changes.
        onPlayerTimeupdate($event) {
          //console.log($event)
        },
        //The media's readyState is HAVE_FUTURE_DATA or higher onPlayerCanplay($event) {
          //console.log($event)
        },
        // The media's readyState is HAVE_ENOUGH_DATA or higher. This means that the entire media file can be played without buffering.
        onPlayerCanplaythrough($event) {
          //console.log($event)
        },
        //Playback status change callback playerStateChanged($event) {
          //console.log($event)
        },
        //Bind a listener to the component's ready state. The difference with event listeners is that if the ready event has already occurred, it will trigger the function immediately. .
        playerReadied($event) {
          //console.log($event)
        },
    }
}
</script>
<style lang="scss" scoped>
.video-player-custom{
    width: 100%;
    height: 180px;
    // vidoeUI rewrites /deep/ .video-js{
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        // player.vjs-tech{
          object-fit: cover;
        }
        // Play button.vjs-big-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2em;
            height: 2em;
            margin-top: -1em;
            margin-left: -1em;
            font-size: 2em;
            line-height: 2em;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.45);
            outline: none;
        }
        // Cover.vjs-poster{
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }
}  
</style>