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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

流媒体

流媒体英语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>