Vue播放RTMP、HLS、HTTP-FLV视频

2,361 阅读1分钟

引言

因为公司需要对接海康威视的监控视频流,后端先后转了三种视频流的方式,感觉还挺有意思的,决定记录一下,因为刚开始写小文章,有不对的地方还请大家指出~

正文

rtmp和hls视频流格式用的是videojs

因为要使用第三方组件库,所以我们需要去引入它到项目中,因为这里用的是最新版,所以也需要引入其辅助库,因为videojs6以上版本中将核心库和辅助库已经剥离开来。

核心库:
npm install video.js -S
辅助库:
npm install videojs-flash videojs-contrib-hls -S

videojs-flash是rtmp视频流需要的,videojs-contrib-hls是hls视频流需要的。
如果使用的是videojs6以下版本的话就不需要引入videojs-flash

我们打开Vue工程的主入口main.js进行引入

import Vue from 'vue';
...
// 引入video.js
import Video from 'video.js';
import 'video.js/dist/video-js.css'; // videojs的样式
Vue.prototype.$video = video; // 在原型上注册以便在任何地方都可以使用
rtmp

准备工作做完以后,开始播放rtmp视频流。 同样的需要在main.js里引入

同上
import 'videojs-flash'; //要播放rtmp视频流,得引入这个库

下面开始正式使用videojs库播放rtmp视频流

<template>
  <div class="videoPlayer">
    <video id="videoId" class="video-js vjs-default-skin vjs-big-play-centered videoDemo">     </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: "rtmp://ns8.indexforce.com/home/mystream",
      videoPlayer: null,
    };
  },
  mounted() {
    this.getRtmp();
  },
  methods: {
    getRtmp() {
      let videoId = document.getElementById("videoId");
      this.videoPlayer = this.$video(videoId, {
        autoplay: true, // 是否自动播放
        controls: true, // 是否显示控件
      });
      this.videoPlayer.src({
        type: "rtmp/flv",
        src: this.videoUrl,
      });
    },
  },
  //销毁video
  beforeDestroy() {
    if (this.videoPlayer) {
      this.videoPlayer.dispose(); // dispose()会直接删除Dom元素
    }
  },
};
</script>

<style>
.videoDemo {
  width: 500px;
  height: 300px;
}
</style>
hls

hls基本上和rtmp的使用方法差不多,也是在main.js入口文件引入

同上
import hls from 'video.js-contrib-hls';
Vue.use(hls);  // 要播放hls视频流这个库就派上用场了

在.vue文件中其他东西和rtmp一样,只需要修改src和type属性就行

...与rtmp一样
data() {
    return {
      videoUrl: "http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8",
      videoPlayer: null,
    };
  },
  mounted() {
    this.getHls();
  },
  methods: {
    getHls() {
      ...与rtmp一样
      this.videoPlayer.src({
        type: "application/x-mpegURL",
        src: this.videoUrl,
      });
    },
  },
http-flv

播放http-flv视频流需要引入flv.js

npm install flv.js -S

这次直接在.vue文件里进行引入。

<template>
  <div class="main">
    <div class="videoPlayer">
      <video
        id="myVideo"
        ref="vedioEle"
        controls
        autoplay
        muted
        width="600"
      ></video>
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  name: "VideoPlay",
  data() {
    return {
      videoUrl: "",
      player: null,
    };
  },
  mounted() {
    this.getVideoPreview();
  },
  methods: {
    getVideoPreview() {
        // 浏览器是否支持flv
      if (flvjs.isSupported()) {
        var videoDom = document.getElementById("myVideo");
        // 创建一个播放器实例
        this.player = flvjs.createPlayer(
          {
            type: "flv", // 媒体类型,默认是 flv,
            url: this.videoUrl, // 流地址
            duration: 6000,
            isLive: true, // 是否是直播流
            hasAudio: false, //是否有声音
            hasVideo: true,
          },
          {
            cors: true, // 是否跨域
            // 其他的配置项可以根据项目实际情况参考 api 去配置
            autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
          }
        );
        this.player.attachMediaElement(videoDom);
        this.player.load();
        this.player.on(
          flvjs.Events.ERROR,
          (errorType, errorDetail, errorInfo) => {
            console.log("errorType:", errorType);
            console.log("errorDetail:", errorDetail);
            console.log("errorInfo:", errorInfo);
            // 视频出错后销毁重新创建
            if (this.player) {
              this.flv_destroy();
              return this.getVideoPreview();
            }
          }
        );
      } else {
        this.$Message.error("不支持flv格式视频");
      }
    },

    // 视频销毁
    flv_destroy() {
      let that = this;
      // 销毁组件
      if (that.player) {
        that.player.pause();
        that.player.unload();
        that.player.detachMediaElement();
        that.player.destroy();
        that.player = null;
        that.$refs.vedioEle = null;
      }
    },
  },
  beforeDestroy() {
    this.flv_destroy();
  },
};
</script>

<style>
.main {
  width: 100%;
  height: 100%;
}
.videoPlayer {
  width: 600px;
}
</style>

至此就完成了rtmp、hls、http-flv视频流的简单使用了,如果想使用更加多的api,可用去上面的链接里进入官网查看哦。

非常感谢您的观看!