flv.js 插件 完成 flv 格式的视频播放

记录---

api中文文档： flv.js 中文API文档 - 简书

参考文章：全网最详细！vue中使用flv.js 播放直播监控视频流_vue使用flv.js_抄一下你代码的博客-CSDN博客

问题：flv.js获取视频，接口调通，画面不展示，关掉音频后，页面展示，音频格式不匹配，更改视频的音频格式后，页面出现

① 组件设置  

  //必须要声明一个播放器的容器  playerRef就是播放器的容器
  const playerRef = React.useRef<any>(null);
  const videoRef = React.useRef(null);

      <div className={styles.site_content_video_right_out}>
                <video
                  className="video"
                  ref={videoRef}
                  preload="auto"
                  width="100%"
                  height="100%"
                  muted
                  autoPlay
                  controls
                  type="rtmp/flv"
                >
                  {/* <source src="" /> */}
                </video>
      </div>

 具体方法----------
 // 获得摄像头信息
  const getInfo = async (item) => {
    // console.log('item', item)
    // getToken(item.equipmentId)
    let nowAddress: any = ''
    // 获得视频地址
    const res = await getVideoAddress({ code, equipmentId: item.equipmentId })
    if (res?.success) {
      const { data } = res
      nowAddress = data
      setAddress(data)
    } else {
      nowAddress = null
      setAddress(null)
    }  
    // setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
    const videoElement = videoRef.current; // 获取到html中的video标签
    if (flvJs.isSupported()) {
      //先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
      if (playerRef.current) {
        playerRef.current.pause(); //暂停播放数据流
        playerRef.current.unload(); //取消数据流加载
        playerRef.current.detachMediaElement(); //将播放实例从节点中取出
        playerRef.current.destroy(); //销毁播放实例
        playerRef.current = null;
      }
      if (nowAddress) {
        const player = playerRef.current = flvJs.createPlayer( //创建直播流，加载到DOM中去
          {
            type: "flv",
            url: nowAddress, //你的url地址
            // url: 'http://218.108.40.230:20301/live/c2lwOmlwODdjMDRAaHpqeS56amp5LmNuank6OTkwMl9tYWluXzIwMjMtMy0yNiAxMDowMDoxMF8yMDIzLTMtMjYgMTY6MDA6MDA=.live.flv?token=7302843b-d9e5-4906-a766-73994f2d7957', //你的url地址
            isLive: true, //数据源是否为直播流
            hasAudio: true, //数据源是否包含有音频
            hasVideo: true, //数据源是否包含有视频
            enableStashBuffer: true, //是否启用缓存区
          },
          {
            enableWorker: false, //不启用分离线程
            enableStashBuffer: false, //关闭IO隐藏缓冲区
            autoCleanupSourceBuffer: true, //自动清除缓存
            lazyLoad: false,
          }
        );
        player.attachMediaElement(videoElement); //放到dom中去
        player.load();//准备完成
        //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
        player.play();//播放
      }

    }
    // }, 1000)
  }

③卸载时销毁播放器

 // 卸载功能组件时释放Video.js播放器
  // 第一个函数参数里面返回一个函数，相当于类组件的componentWillUnmount
  React.useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current.pause();
        playerRef.current.unload();
        playerRef.current.detachMediaElement();
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, [playerRef]);