react 基于 flv.js 封装简单的播放器（二）

没想到今天使用一个小时的时间并没有做多少。主要是把声音和全屏给弄上了。

声音：

{/* 控制声音 */}
<div
  className={'img-container audio-container'}
  onClick={onClickAudio}>
  <img src={yangshengqi} className={'img'} />
  <div className={`audio ${isShowAudio ? 'show' : 'hide'}`}>
    <Slider defaultValue={100} min={0} max={100} vertical tipFormatter={null} onChange={onChange} />
  </div>
</div>

这里我使用的是 antd 中的，并没有自己封装。下面看看对应的 css 代码：

.audio-container {
  position: relative;
  .show {
    display: flex;
  }
  .hide {
    display: none;
  }
  .audio {
    height: 100px;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 140%;
    left: 0;
    .ant-tooltip-open {
      border-color: rgba(0, 0, 0, 0.53) !important;
    }
    .ant-slider-rail {
      background-color: rgba(0, 0, 0, 0.1) !important;
    }
    .ant-slider-track {
      background-color: rgba(0, 0, 0, 0.53) !important;
    }
  }
}
.img-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    height: 80%;
  }
}

声音部分的控制：

const onChange = useCallback((value: number) => {
  if (videoRef.current) {
    videoRef.current.volume = value / 100;
  }
}, []);

接下来是全屏，目前只支持 chrome ，由于我全屏的方案要改，因为我发现这种全屏以后自定义的样式也发生了改变，所以我不使用系统提供的全屏，或者我看怎样可以直接修改 video 组件中的样式。

const onClickFullscreen = useCallback(() => {
  if (videoRef.current) {
    videoRef.current.requestFullscreen();
  }
}, []);

我忘记说明了，我这个是用于直播的，所以没有视频播放器里面的进度条。

接下来我还需要做到以下：

• 全屏和不全屏的样式相同；
• 关闭视频流

react 基于 flv.js 封装简单的播放器（三）