react-html5video

该组件已不再维护。建议您使用类似 react-use 中的 `useVideo` 作为替代。

这是一个可自定义的 HTML5 视频高阶组件(HoC)，允许自定义和可配置的控件，支持国际化和无障碍功能。

V2 API 已更改，不向后兼容。您可以在此处找到旧版文档。

查看演示。

安装

npm install react-html5video --save

对等依赖

react@>=15.0.x
react-dom@>=15.0.x
prop-types@>=15.0.x

使用方法

简单用法

使用该组件最简单的方法是使用提供的默认播放器。它的工作方式与普通的 HTML5 视频相同，支持所有HTML5 视频属性，除了 controls。现在这是"受控的"，可以是任意顺序的支持的组件名称数组，如下所示：

import { DefaultPlayer as Video } from 'react-html5video';
import 'react-html5video/dist/styles.css';
render() {
    return (
        <Video autoPlay loop muted
            controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
            poster="http://sourceposter.jpg"
            onCanPlayThrough={() => {
                // 执行操作
            }}>
            <source src="http://sourcefile.webm" type="video/webm" />
            <track label="English" kind="subtitles" srcLang="en" src="http://source.vtt" default />
        </Video>
    );
}

无障碍功能和国际化

提供的自定义控件是使用 <button> 和 <input type="range"> 构建的，这意味着当它们被聚焦时可以使用基本的键盘控制。例如，您可以在静音、播放和全屏按钮上按空格键，以及在聚焦滑块时使用箭头键进行搜索。在需要用户交互的地方使用了 aria-label 属性以支持屏幕阅读器。尝试在启用 Vox 的情况下，通过 Tab 键浏览演示。

您可以像这样更改所有控件的 aria-label 值的翻译：

<Video copy={{ key: value }}>

默认的英文 copy 可以在这里找到。

*免责声明：很遗憾，我在无障碍方面没有太多经验，但我尝试使用了PayPal的无障碍HTML5播放器的一些功能。如果有人对此有进一步的意见，请提出问题或提交拉取请求。

高级用法

如果你想发挥创意并创建自己的视频播放器，那么你需要使用高阶组件。这个高阶组件将React组件连接到所有HTML5视频属性和它所包装组件中找到的第一个视频的HTMLMediaElement。

import videoConnect from 'react-html5video';

const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
    <div>
        <video {...restProps}>
            { children }
        </video>
        <p>
            以下是上述HTML5视频的视频属性：
            { JSON.stringify(video) }
        </p>
        <a href="#" onClick={(e) => {
            e.preventDefault();
            // 你也可以对HTMLMediaElement DOM元素进行任何操作。
            videoEl.pause();
        }}>
            暂停视频
        </a>
    </div>
);

export default videoConnect(MyVideoPlayer)

上面的代码将简单地打印出MyVideoPlayer中HTML5 <video>的属性。现在你在组件中可以使用这些属性和HTMLMediaElement本身，你可以利用它们创建新的自定义控件。请参考默认播放器作为示例。

API

API的行为很像React Redux的connect高阶组件，但不是使用dispatch来改变状态，而是我们可以访问HTMLMediaElement。

`videoConnect(ReactComponent, [mapStateToProps], [mapVideoElToProps], [mergeProps])`

mapStateToProps(videoState, ownProps) - 使用此函数返回组件所需的HTML5视频属性。这里返回的普通对象将使用mergeProps函数与mapVideoElToProps返回的内容合并。默认情况下，它返回所有视频属性，以便在包装组件中通过this.props.video访问。
mapVideoElToProps(videoEl, videoState, ownProps) - 使用此函数返回一个使用videoEl来更新视频状态的普通对象。videoEl是原始的HTMLMediaElement。这里返回的对象将使用mergeProps函数与mapStateToProps返回的内容合并。默认情况下，videoEl可以在包装组件中通过this.props.videoEl访问。
mergeProps(stateProps, videoElProps, ownProps) - 如果指定，它将接收mapStateToProps、mapVideoElToProps和父级props的结果。你返回的普通对象将传递给包装组件。默认情况下，这将执行Object.assign({}, stateProps, videoElProps, ownProps)。

组件/辅助函数

如果需要，也可以使用单独的默认播放器组件。apiHelpers也是可用的。这些只是用于某种程度上规范化HTML5视频播放器API的方法：

import { Time, Seek, Volume, Captions, PlayPause, Fullscreen, Overlay, apiHelpers } from 'react-html5video';

## 贡献

### 开发环境设置

要运行一个带有热模块替换（HMR）的开发服务器：

```bash
    $ npm i
    $ npm run i:demo
    $ npm start