Skip to content
基于 react hooks 的 video 播放组件,结构简单,代码简洁,扩展方便。
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs fix: 手机端 control bar 显示时进度条 handel 强制显示 Sep 6, 2019
packages chore(release): publish v0.8.3 Sep 6, 2019
scripts chore: 整理目录结构,删除多余引用,修正 homepage 地址 Aug 27, 2019
.eslintrc.js
.gitignore feat: 将 react custom hooks 拆分出来,使用 lerna 管理仓库 Aug 23, 2019
.travis.yml fix: 调整目录结构,支持自定义 hooks,解决拖动进度时控制栏隐藏问题 Aug 27, 2019
CHANGELOG.md
README.md docs: 更新文档 Sep 6, 2019
commitlint.config.js test(useVideoTime): 暂时删除 useVideoTime 单元测试 Jul 30, 2019
lerna.json chore(release): publish v0.8.3 Sep 6, 2019
package.json chore: 重命名 publish 命令 Sep 5, 2019
yarn.lock fix: 使用 淘宝源 重新生成 yarn.lock 文件 Aug 27, 2019

README.md

ReactPlayer

ReactPlayer

npm reactjs-player Travis (.org) Coveralls github

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

特点

ReactPlayer 遵循 少即是多(Less is more) 的设计原则,具有以下特点:

  • 结构简单:使用 react hooks 做状态管理,将不同的状态拆分到不同的 react custom hooks 中,ReactPlayer 中进行组合
  • 扩展方便:扩展时实现对应的 react custom hooks 并在 ReactPlayer 中根据条件进行加载
  • 代码简洁:只做播放器内部的状态管理和控制栏显示与控制
  • 理解容易: ReactPlayer 事件基于 vidoe 媒体事件 进行扩展,减小理解成本
  • 使用相对复杂:不同于其他的 h5 播放器,ReactPlayer 将控制权交给使用者,无法做到一行代码播放所有兼容的格式

Getting started

git clone https://github.com/goblin-laboratory/reactjs-player.git
cd reactjs-player
yarn install
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 ReactPlayer from 'reactjs-player';

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

Getting started

git clone https://github.com/goblin-laboratory/reactjs-player.git
cd reactjs-player
yarn install
cd packages/reactjs-player
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 ReactPlayer from 'reactjs-player';

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

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

API

见 API 说明文档:API.md

Supported media

  • HLS
  • FLV
  • RTMP

Contributing

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

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

Licensing

ReactPlayer is MIT licensed.

You can’t perform that action at this time.