npm i -S vue-video-player

<template>
  <div class="video-js">
   
   <div 
   v-if="!videoSrc" 
   class="no-video">
    暂未播放视频
   </div>
 
   <video-player 
    v-else 
    class="video-player vjs-custom-skin"
    ref="videoPlayer"
    :playsinline="true"
    :options="playerOptions"
    >
   </video-player>
  </div>
</template>

//  引入以下文件
 
 
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
 
videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

export default {
 name: 'videojs',
 components: {
  videoPlayer
 },
 data () {
  return {
   videoSrc: '',
   playerOptions: {
    live: true,
    autoplay: true, // 如果true，浏览器准备好时开始播放
    muted: false, // 默认情况下将会消除任何音频
    loop: false, // 是否视频一结束就重新开始
    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    controlBar: {
     timeDivider: false,
     durationDisplay: false,
     remainingTimeDisplay: false,
     currentTimeDisplay: false, // 当前时间
     volumeControl: false, // 声音控制键
     playToggle: false, // 暂停和播放键
     progressControl: false, // 进度条
     fullscreenToggle: true // 全屏按钮
    },
    techOrder: ['flash', 'html5'], // 兼容顺序
    flash: {
     hls: {
      withCredentials: false
     },
     swf: SWF_URL
    },
    sources: [{
     type: 'rtmp/flv',
     src: '' // 视频地址-改变它的值播放的视频会改变
    }],
    notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   }
  }
 }
}

<style scoped lang="scss">
 .video-js{
  width:100%;
  height:100%;
  .no-video{
   display:flex;
   height:100%;
   font-size:14px;
   text-align:center;
   justify-content: center;
   align-items:center;
  }
 }
</style>

<template>
 <div class="about">
  <MyVideo 
  ref="playerObj">
  </MyVideo>
  <!-- <a @click="playVideo">播放视频</a> -->
 </div>
</template>
<script>
 import MyVideo from './my-video';
 import {
   getVideoStream,
   getCameraInfo,
   putCameraHeart
 } from '@/apis/equipmentApis'
 export default {
   name: 'about',
   props: {
     row: {
       type: Object,
       default () {
         return {
 
         }
       }
     }
   },
   components: {
     MyVideo
   },
   data() {
     return {}
 
   },
   methods: {
     // 播放视频
     playVideo (url) {
       // 可以测试一下 下边是湖南卫视直播视频流 看看能不能播放 
      //  this.$refs['playerObj'].videoSrc = 'rtmp://192.168.6.101:1935/live/7d7f8e6632dc0cb60292e5c519ef6981'
      //  this.$refs['playerObj'].playerOptions.sources[0].src = 'rtmp://192.168.6.101:1935/live/7d7f8e6632dc0cb60292e5c519ef6981'
      this.$refs['playerObj'].videoSrc = url;
       this.$refs['playerObj'].playerOptions.sources[0].src = url;
     },
     // 动态获取视频流
     async getVideoSrc (params) {
       try {
         let res = await getVideoStream(params);
         console.log('动态获取视频流 - res', res);
         if (res.data.code == 0 && res.data.data) {
           let {
             url,
             token
           } = res.data.data;
           window.sessionStorage.setItem('videoToken', String(token));
           url!= '' && (this.playVideo(url));
           token && (await putCameraHeart(token));
         }
       } catch (error) {
         console.log('动态获取视频流 - 失败', error);
       }
     },
     // 获取摄像头的信息 比如 ip password等等
     async getVideoInfo () {
       try {
         let res = await getCameraInfo(this.row.devId);
         console.log('相机的信息---', res);
         if (res.data.code == 0 && res.data.data) {
           let {
            ip,
            username,
            password,
           } = res.data.data;
          // 获取视频流的参数  
          let params = {
            channel: '1',
            factory: 'hikvision',
            ip,
            username,
            password,
            stream: 'main',
          };
          this.getVideoSrc(params);
         }
       } catch (error) {
         console.log('获取摄像头的信息 - 失败', error);
       }
     }
   },
   created () {
     this.getVideoInfo();
   },
   mounted () {
    //  setTimeout(() => {
    //    this.playVideo();
    //  }, 1500);
   }
 }
</script>
<style lang="scss">
 
.about {
  width: 500px;
  height: 300px;
}
 
</style>

// dialog关闭弹窗的回调
    closeDialog () {
      this.stopVideoStream();
    },
    // 停止视频流
    async stopVideoStream () {
      try {
        let token = window.sessionStorage.getItem('videoToken');
        let res = await stopCameraHeart(token);
        console.log('停止视频流', res);
      } catch (error) {
        console.log('停止视频流', error);
      }
    },