First download and install flX.js:

npm install --save flv.js
Copy the code

Next, you can use it. First, you have the tag ready, which is video:

<video ref={videoRef} className={'video'} >
  {`Your browser is too old which doesn't support HTML5 video.`}
</video>
Copy the code

Next, establish the connection between flx.js and video and configure some simple parameters:

if (flvJs.isSupported()) {
  flvRef.current = flvJs.createPlayer({
    type: 'flv'.isLive: true.cors: true.hasVideo: true.url:
      'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'});if(videoRef.current) { flvRef.current.attachMediaElement(videoRef.current); flvRef.current.load(); }}Copy the code

Next lay out the controls:

<div className={'control'} >
  <img
    src={isPlay ? zanting : bofang}
    className={'img'}
    onClick={onClickPlay}
  />
  <img src={shexiangtou} className={'img'} / >
  <img src={yangshengqi} className={'img'} / >
  <img src={quanping} className={'img'} / >
</div>
Copy the code

I’m using SVG images here, which I downloaded from the Ali icon.

Here’s a look at all the layouts:

<div className={'live'} >
  <div className={'video-container'} >
    <video ref={videoRef} className={'video'} >
      {`Your browser is too old which doesn't support HTML5 video.`}
    </video>
    <div className={'control'} >
      <img
        src={isPlay ? zanting : bofang}
        className={'img'}
        onClick={onClickPlay}
      />
      <img src={shexiangtou} className={'img'} / >
      <img src={yangshengqi} className={'img'} / >
      <img src={quanping} className={'img'} / >
    </div>
  </div>
</div>
Copy the code

Look at the less file again:

.live {
  display: flex;
  flex-direction: row;
  justify-content: center;
  .video-container {
    position: relative;
    .control {
      display: flex;
      flex-direction: row;
      align-items: center;
      position: absolute;
      bottom: 8px;
      right: 0;
      width: 27%;
      height: 6%;
      background-color: rgba(0.0.0.0.53);
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      justify-content: space-around;
      .img {
        height: 80%; }}}.video {
    display: block; }}Copy the code

Here is the entire file:

import React, {useCallback, useEffect, useRef, useState} from 'react';
import flvJs from 'flv.js';
import './styles.less';
import bofang from '.. /.. /common/assets/bofang.svg';
import quanping from '.. /.. /common/assets/quanping.svg';
import shexiangtou from '.. /.. /common/assets/shexiangtou.svg';
import yangshengqi from '.. /.. /common/assets/yangshengqi.svg';
import zanting from '.. /.. /common/assets/zanting.svg';

function Live() {
  const [isPlay, setIsPlay] = useState(false);
  const flvRef = useRef<flvJs.Player>();
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() = > {
    if (flvJs.isSupported()) {
      flvRef.current = flvJs.createPlayer({
        type: 'flv'.isLive: true.cors: true.hasVideo: true.url:
          'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'});if(videoRef.current) { flvRef.current.attachMediaElement(videoRef.current); flvRef.current.load(); }}} []);const onClickPlay = useCallback(() = > {
    if (flvRef.current) {
      if (isPlay) {
        flvRef.current.pause();
      } else{ flvRef.current.play(); } setIsPlay(! isPlay); } }, [isPlay]);return (
    <div className={'live'} >
      <div className={'video-container'} >
        <video ref={videoRef} className={'video'} >
          {`Your browser is too old which doesn't support HTML5 video.`}
        </video>
        <div className={'control'} >
          <img
            src={isPlay ? zanting : bofang}
            className={'img'}
            onClick={onClickPlay}
          />
          <img src={shexiangtou} className={'img'} / >
          <img src={yangshengqi} className={'img'} / >
          <img src={quanping} className={'img'} / >
        </div>
      </div>
    </div>
  );
}

export default Live;
Copy the code

There’s still a lot of work to be done. We’ll continue tomorrow.