The vue project uses videojs + videojs-contrib-hls to play 3mu8/live video stream

1. Installation  video.js and  videojs-contrib-hls plug-ins :

  npm install video.js --save
  npm install videojs-contrib-hls  --save
  npm install @videojs/http-streaming  --save

Or import the cdn file on the official website

2. On the page that needs to load the video

<template>
  <div class="Camera" v-if="Camera">
    <video
      ref="video"
      id="video"
      class="video-js vjs-default-skin"
      controls
      width="400px"
      height="400px"
      object-fit:cover
      preload="auto">
     <source :src="videoUrl" type="application/x-mpegURL">
   </video>
  </div>
</template>

import file

<script>
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
  import "@videojs/http-streaming"
  import 'video.js/dist/video-js.min.css'
</script>

Method for initializing and dynamically playing video

export default {
  data(){
    return{
      Camera：false, // 控制视频显示隐藏
      videoUrl:'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
    }
  },
 methods:{
   // 点击摄像头
   clickSurveillance(res){
      this.Camera = true

      // 注意这里需要加定时器或者在异步请求中才可以
      setTimeout(() => {
         this.player = videojs('video',{
           bigPlayButton: false,
           controlBar: false,
           notSupportedMessage: '此视频暂无法播放，请稍后再试'
        },function() {
           this.play()
        })

      // 当前要播放的视频地址
      this.videoUrl = xxxxxx

        this.player.src(this.videoUrl);
        videojs('video').ready(function(){
           this.player = this;
           this.player.play();
        });
      },500)
     
    },
  }

3. Close the video

Here I stepped on a pit when I was doing it, because the arrow function was not used in the timer at the beginning, causing this.player to be null all the time, and it got stuck for two hours. . . .

methods：{
   // 关闭摄像头
   closeVideo(){
      this.player.dispose() 
      this.Camera = false
   },
}