/reactjs-player

基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。

Primary LanguageJavaScript

ReactjsPlayer

ReactjsPlayer

npm reactjs-player Travis (.org) Coveralls github

基于 react hooks 的 video 播放组件，结构简单，代码简洁，扩展方便。

特点

ReactjsPlayer 遵循 少即是多（Less is more） 的设计原则，具有以下特点：

  • 结构简单：使用 react hooks 做状态管理，将不同的状态拆分到不同的 react custom hooks 中，ReactjsPlayer 中进行组合

  • 扩展方便：扩展时实现对应的 react custom hooks 并在 ReactjsPlayer 中根据条件进行加载

  • 代码简洁：只做播放器内部的状态管理和控制栏显示与控制

  • 理解容易： ReactjsPlayer 事件基于 vidoe 媒体事件 进行扩展，减小理解成本

  • 接口统一：ReactjsPlayer 与 GrindPlayer 封装了统一的状态和方法，并通过 ReactPlayerContext 导出

  • 使用相对复杂：不同于其他的 h5 播放器，ReactjsPlayer 将控制权交给使用者，无法做到一行代码播放所有兼容的格式

Getting started

git clone https://github.com/goblin-laboratory/reactjs-player.git
cd reactjs-player
yarn install

cd packages/reactjs-player/
yarn start

cd packages/reactjs-player-demo/
yarn start

Usage

Demo page: https://goblin-laboratory.github.io/reactjs-player/

npm install reactjs-player --save
# or
yarn add reactjs-player

import React, { Component } from 'react';
import ReactjsPlayer from 'reactjs-player';

const App = () => {
  return <ReactjsPlayer kernel="hlsjs" src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" />;
};

常用场景见说明文档：Usage.md

TODO

3.x 版本计划

  1. 使用 TypeScript 重构
  2. 使用 tsdx 负责打包
  3. Jest 自动化测试
  4. storybook

API

见 API 说明文档：API.md

注意事项

  1. reactjs-player position 为 absolute ， 大小和位置依赖相对于 static 定位以外的第一个父元素，建议将父节点 position 设置为 relative，通过控制父节点的大小和位置来控制 reactjs-player 的布局结果，可以参考 demo 中的实现

  2. GrindPlayer 必须要大于 400x300 才能正常播放，请保证播放区域不小于 400x300，否则画面会出现显示不全的情况

Supported media

  • HLS
  • FLV
  • RTMP

Contributing

非常欢迎你的贡献，你可以通过以下方式和我们一起共建 😃：

  • 通过 Issue 报告 bug 或进行咨询。
  • 提交 Pull Request 。

Licensing

ReactjsPlayer is MIT licensed.