示例：React 项目中封装 Flv.js

张云飞Vir

发布于 2021-05-06 15:22:24

2.1K0

发布于 2021-05-06 15:22:24

1.背景

Flv.js 是 B站开源的播放器，开源用于播放 flv 的视频流而不依赖 flash。在React项目中如何集成？本文给出我的操作方法。

flv.js 是一个HTML5 Flash视频(FLV)播放器，它通过纯JavaScript编写，没有使用 Flash。它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器。

它依赖于媒体源扩展 MSE ( Media Source Extensions ）来工作。它来自 Bilibili 开发和开源。

2. 思路

关键在于获得 flv.js ，和封装。请参考：https://github.com/gwuhaolin/reflv

3.示例过程

1.创建和新的React项目

(1)安装和创建

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app web
cd web

(2)配置相对路径读取组件的方式 打开 webpack.config.js 文件，搜索 alias 关键字，修改加入下面这行。

        '@': paths.appSrc,

它表示用 @ 符号匹配当前项目中 src 路径图例：

image.png

(3) 引入 flv.js 安装 flv.js，执行:

npm i flv.js

(4)配置相对路径读取组件的方式 参考自 https://github.com/gwuhaolin/reflv 项目，创建一个 Reflv组件

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import flvjs from 'flv.js';

/**
 * react component wrap flv.js
 */
export default class Reflv extends Component {

  static propTypes = {
    className: PropTypes.string,
    style: PropTypes.object,
    /**
     * media URL, can be starts with 'https(s)' or 'ws(s)' (WebSocket)
     */
    url: PropTypes.string,
    /**
     * media type, 'flv' or 'mp4'
     */
    type: PropTypes.oneOf(['flv', 'mp4']).isRequired,
    /**
     * whether the data source is a **live stream**
     */
    isLive: PropTypes.bool,
    /**
     * whether to enable CORS for http fetching
     */
    cors: PropTypes.bool,
    /**
     * whether to do http fetching with cookies
     */
    withCredentials: PropTypes.bool,
    /**
     * whether the stream has audio track
     */
    hasAudio: PropTypes.bool,
    /**
     * whether the stream has video track
     */
    hasVideo: PropTypes.bool,
    /**
     * total media duration, in milliseconds
     */
    duration: PropTypes.bool,
    /**
     * total file size of media file, in bytes
     */
    filesize: PropTypes.number,
    /**
     * Optional field for multipart playback, see MediaSegment
     */
    segments: PropTypes.arrayOf(PropTypes.shape({
      /**
       * indicates segment duration in milliseconds
       */
      duration: PropTypes.number.isRequired,
      /**
       * indicates segment file size in bytes
       */
      filesize: PropTypes.number,
      /**
       * indicates segment file URL
       */
      url: PropTypes.string.isRequired,
    })),
    /**
     * @see https://github.com/Bilibili/flv.js/blob/master/docs/api.md#config
     */
    config: PropTypes.object,
  }

  initFlv = ($video) => {
    if ($video) {
      if (flvjs.isSupported()) {
        let flvPlayer = flvjs.createPlayer({ ...this.props }, this.props.config);
        flvPlayer.attachMediaElement($video);
        flvPlayer.load();
        flvPlayer.play();
        this.flvPlayer = flvPlayer;
      }
    }
  }

  componentWillUnmount() {
    if (this.flvPlayer) {
      this.flvPlayer.unload();
      this.flvPlayer.detachMediaElement();
    }
  }

  render() {
    const { className, style } = this.props;
    return (
      <video
        className={className}
        controls={true}
        style={Object.assign({
          width: '100%',
        }, style)}
        ref={this.initFlv}
      />
    )
  }
}

(5) 编写Demo

import React, { PureComponent } from 'react';
import Reflv from '@/Reflv/index';

import demo from './movie.flv';

export class MyDemo extends PureComponent {

  render() {
    return (
      <Reflv url={demo} type="flv"/>
    )
  }
}