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

首先下载安装 flx.js ：

npm install --save flv.js

接下来就可以使用了，首先把标签准备好，也就是 video ：

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

接下来建立 flx.js 和 video 的联系并配置一些简单的参数：

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();
  }
}

接下来布局控件：

<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>

这里用到了 svg 图片，我从阿里图标上下载的。

下面看所有的布局：

<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>

再来看 less 文件：

.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;
  }
}

下面是整个文件：

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;

还有很多工作没做，明天继续。