vue项目使用videojs + videojs-contrib-hls播放 3mu8/直播视频流

1、安装 video.js 和 videojs-contrib-hls 插件：

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

或者在官网引入cdn文件

2、在需要加载视频的页面

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

引入文件

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

初始化和动态播放视频的方法

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、关闭视频

这里我在做的时候踩了一个坑，因为刚开始定时器里面没有使用箭头函数，导致 this.player 一直为null ，足足卡了两个小时。。。。

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