vue 项目中使用 video.js/videojs-contrib-hls 实现hls流媒体监控摄像头实时播放

流媒体

流媒体（英语：Streaming Media）是指将一连串的多媒体数据压缩后，
经过互联网分段发送数据，在互联网上即时传输影音以供观赏的一种技术与过程，
此技术使得数据数据包得以像流水一样发送，如果不使用此技术，就必须在使用前下载整个媒体文件。

一些流行的流媒体服务包括Hulu、Netflix、Amazon Prime Video以及视频分享网站YouTube，
 音乐流网站有Spotify以及Apple Music，电子游戏流网站有Twitch以及Mixer。

npm下载

npm i videojs-contrib-hls --save

npm i video.js --save

main中引入video-js.css

import 'video.js/dist/video-js.css'; // video.js样式

组件封装

<template>
  <div class="wrap">
    <video
      id="my-video"
      class="video-js vjs-default-skin box"
      controls
      preload="auto"
    >
      <source :src="src" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
  import videojs from 'video.js'
  import 'videojs-contrib-hls'
  //获取src接口
  import { getSrc } from '@/api/index'
  export default {
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        src: '',
        player: null
      }
    },
    created() {
      getSrc({ id: this.id}).then((res) => {
        this.src = res.data.msg // 延迟一秒来唤起播放器
      })
    },
    mounted() {
      // 延迟一秒来唤起播放器
      const that = this
      this.timers = setTimeout(() => {
        that.$nextTick(() => {
          that.getVideo()
        })
      }, 1000)
    },
    beforeDestroy() {
      this.player.dispose() // 关闭控件
    },
    methods: {
      getVideo() {
        this.player = videojs('my-video', {
          bigPlayButton: true, // 显示播放按钮
          autoplay: true,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true // 显示控件
        })
      }
    }
  }
</script>
<style scoped lang="scss">
// 把类加上 设置box宽高 
  .box {
    width: 100%;
    height: 500px;
  }
</style>