flv接入海康威视

<div class="videos">
      <video id="videoOuelet" class="video-flv" controls muted autoplay>
        Your browser is too old which doesn't support HTML5 video.
      </video>
</div>

<script>
   // 视频
  changeVideo() {
      if (this.flvPlayer) {
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      const findUrl = this.videoList.find(i => i.name === this.videoSelect);
      if (findUrl) {
        this.getVideo(findUrl.url);
      }
  };
  // 视频生成
  getVideo(url) {
      if (flvjs.isSupported()) {
        const videoEl = document.getElementById('videoOuelet');
        this.flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            isLive: true,
            fluid: true,
            stashInitialSize: 128, // 减少首桢显示等待时长
            url: `${process.env.VUE_APP_CAMERA_VIDEO_ADDRESS}live?url=${url}`,
          },
          {
            enableStashBuffer: false,
            fixAudioTimestampGap: false,
            isLive: true,
          }
        );
        this.flvPlayer.attachMediaElement(videoEl);
        this.flvPlayer.load();
        this.flvPlayer.play();
        this.flvPlayer.on(flvjs.Events.STATISTICS_INFO, res => {
          if (!res.speed) {
            // this.flvPlayer.pause();
            // this.flvPlayer.unload();
            // this.flvPlayer.detachMediaElement();
            // this.flvPlayer.destroy();
            // this.flvPlayer = null;
          }
        });
        this.flvPlayer.on(flvjs.Events.ERROR, res => {
          console.log('error22', res);

          this.flvPlayer.pause();
          this.flvPlayer.unload();
          this.flvPlayer.detachMediaElement();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        });
      }
    };
</script>
posted @ 2022-06-24 15:33  lutwelve  阅读(314)  评论(0编辑  收藏  举报