Vue+Video.js播放m3u8視頻流(海康威視攝像頭+RTMP服務+FFmpeg)

場景

Nginx搭建RTMP服務器+FFmpeg實現海康威視攝像頭預覽：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121202130

在上面的基礎上實現Nginx搭建RTMP服務器，然后使用FFmpeg實現攝像頭推流。

最后使用VCL打開網絡串流的方式去進行攝像頭預覽。

 

如果要在前端Vue中去加載顯示視頻，怎么實現。

若依前后端分離版手把手教你本地搭建環境並運行項目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面搭建起來項目的基礎上去實現。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、安裝video.js相關依賴

npm install --save video.js

npm install --save videojs-contrib-hls

2、在需要播放視頻的頁面引入video.js相關的對象和css文件

import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";

3、頁面播放視頻的元素控件

    <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="500px"
    >
      <source
        src="http://127.0.0.1:81/hls/badao.m3u8"
        type="application/x-mpegURL"
      />
    </video>

注意這里的id屬性，后面要用到。

然后這里的src屬性對應上面使用VCL播放時的網絡串流地址。

4、頁面加載完成之后設置6秒的延遲播放視頻

  mounted() {
    let _that = this;
    setTimeout(() => {
      _that.getVideo();
    }, 6000);
  },

這里如果不設置延遲播放的話會提示:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

 

 

 

 

5、播放視頻的具體實現方法

  methods: {
    getVideo() {
      videojs(
        "my-video",
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
        },
        function () {
          this.play();
        }
      );
    },
  },

6、頁面完整代碼

<template>
  <div class="component-upload-image">
    <video
      id="my-video"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="500px"
    >
      <source
        src="http://127.0.0.1:81/hls/badao.m3u8"
        type="application/x-mpegURL"
      />
    </video>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import videojs from "video.js";
import "videojs-contrib-hls";

export default {
  components: {

  },
  name: "m3u8Play",
  data() {
    return {};
  },
  mounted() {
    let _that = this;
    setTimeout(() => {
      _that.getVideo();
    }, 6000);
  },
  methods: {
    getVideo() {
      videojs(
        "my-video",
        {
          bigPlayButton: false,
          textTrackDisplay: false,
          posterImage: true,
          errorDisplay: false,
          controlBar: true,
        },
        function () {
          this.play();
        }
      );
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
</style>

7、效果