vue+flv.js实现视频播放

最新推荐文章于 2024-05-04 02:42:40 发布

一条咸鱼ya

最新推荐文章于 2024-05-04 02:42:40 发布

阅读量2.9k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 音视频

本文链接：https://blog.csdn.net/qq_46141403/article/details/127554638

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、使用步骤

1.引入库

代码如下（示例）： npm install --save flv.js 下载flv依赖

导入:import flvjs from "flv.js";

2.读入数据

使用video标签引入
          <video
            id="videoElement"
            controls
            autoplay
            muted
            controlsList="nodownload"
            :disablePictureInPicture="true"
            v-show="conditions"
            style="width: 100%; height: 100%; object-fit: fill"
          ></video>

1.获取视频流地址并使用

     createVideo() {
      getCameraVideoAPI({ cameraId: id }).then((res) => {

        if (res.success) {
          const that = this;
          this.flvPlayerList = [];

          if (flvjs.isSupported()) {
            var videoElement = document.getElementById("videoElement");
            videoElement.addEventListener("click", mouseHandler, false);
            function mouseHandler(event) {
              event.preventDefault();
            }//这个我是用来防止用户点击，可不加
            that.flvPlayer = flvjs.createPlayer({
              type: "flv",
              url: res.result,
              isLive: true,
              hasAudio: false, // 关闭声音
              reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等
              // cors: true,
              enableWorker: false, //不启用分离线程
              enableStashBuffer: false, //关闭IO隐藏缓冲区
              autoCleanupSourceBuffer: true, //对SourceBuffer进行自动清理缓存
              autoCleanupMaxBackwardDuration: 12, //    当向后缓冲区持续时间超过此值（以秒为单位）时，请对SourceBuffer进行自动清理
              autoCleanupMinBackwardDuration: 60, //指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
              stashInitialSize: 128, // 缓存大小(kb)  默认384kb
              fixAudioTimestampGap: false,
            });
            this.flvPlayer.attachMediaElement(videoElement);
            // this.flvPlayer.attachMediaElement(document.getElementById('videojs-player' + model.index + "_" + this.pageId));
            that.flvPlayer.load();
            that.flvPlayer.play(); //不用打开
            that.flvPlayerList.push(that.flvPlayer);
          }
        }
      });
    },

2.有一个问题就是同时只能播放6个视频，超出6个视频会加载不出来，需要摧毁上一个视频，关闭视频的时候调用这个方法就好

    //销毁视频实例
    destoryVideo() {
      if (this.flvPlayerList.length) {
        this.flvPlayerList.forEach((item) => {
          console.log(item);
          item.unload();

          item.detachMediaElement();
        });
      }
      if (this.flvPlayer) {
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },

3.还有一个就是，flv视频在谷歌浏览器播放，如果你离开页面他会暂停在那，回来会从暂停的时间进行播放，所以为了解决这个，就监测用户进入离开，进入时重新调取视频，离开就销毁

  mounted() {

    document.addEventListener("visibilitychange", this.handleVisiable);

  },
  destroyed() {

    this.destoryVideo();
    document.removeEventListener("visibilitychange", this.handleVisiable);

    //清除计时器
  },
  methods: {


    //离开页面回来刷新视频
    handleVisiable(e) {
      switch (e.target.visibilityState) {
        case "prerender":
          // console.log("网页预渲染，内容不可见");
          break;
        case "hidden":
          // console.log("内容不可见，处理后台、最小化、锁屏状态");
          this.destoryVideo();
          break;
        case "visible":
          this.createVideo();
          break;
      }
    },
}