I didn’t expect to get much done in one hour today. The main thing is to get the sound and the full screen.

Voice:

{/* control sound */}<div
  className={'img-container audio-container'}
  onClick={onClickAudio}>
  <img src={yangshengqi} className={'img'} / >
  <div className={`audioThe ${isShowAudio ? 'show' : 'hide'} `} >
    <Slider defaultValue={100} min={0} max={100} vertical tipFormatter={null} onChange={onChange} />
  </div>
</div>
Copy the code

Here I’m using antD, and I’m not wrapping myself. Let’s look at the corresponding CSS code:

.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%; }}Copy the code

Control of the sound part:

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

The next step is full-screen, currently only Chrome is supported. Since my full-screen scheme needs to be changed, I find that the customized style has changed after this full-screen, so I don’t use the full-screen provided by the system, or I see how to directly modify the style in the video component.

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

I forgot to mention that this is for live streaming, so there is no progress bar in the video player.

Next I need to do the following:

  • Full-screen and non-full-screen styles are the same;
  • Close the video stream

React is a simple player based on FlV.js.