video标签布播放FLV直播视频

不多哔哔 直接上案例

<video
        ref="video"
        class="video-js vjs-default-skin vjs-big-play-centered flex-grid aaaa"
        style="object-fit: fill;width:100%"
        :width="width"
        :height="height"
        autoplay
        loop
      >抱歉, 你的浏览器不支持</video>
createPlayer(url) {
          
   
      console.log(url);
      //url是flv格式的视频播放地址
       this.loading = true;
      if (flvjs.isSupported()) {
          
   
        if (this.player) {
          
   
          this.player.pause();
          this.player.unload();
          this.player.detachMediaElement();
          this.player.destroy();
        }
        this.player = flvjs.createPlayer(
          {
          
   
            type: "flv",
            url,
            isLive: true,
            hasAudio: false,
            hasVideo: true
          },
          {
          
   
            isLive: true,
            enableStashBuffer: true,
            enableWorker: true,
            lazyLoad: false,
            stashInitialSize: 120
            // autoCleanupSourceBuffer:true
          }
        );
         
        this.player.attachMediaElement(this.$refs.video);
        
        this.player.load(); //加载

        this.$refs.video.addEventListener("loadedmetadata", e => {
          
   
           this.loading = false;
          this.player.play();
        });
        
      }
    },
    //关闭视频 -----放在事件中
       if (this.player) {
          
   
        this.player.pause();
        this.player.unload();
        this.player.detachMediaElement();
        this.player.destroy();
        this.player = null;
      }
经验分享 程序员 微信小程序 职场和发展