You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -23,10 +23,10 @@ View the [demo](http://mderrick.github.io/react-html5video/).
23
23
24
24
### Simple Usage
25
25
26
-
Use normal HTML5 `<video>` markup with all the standard [html attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) and supported [React media events](https://facebook.github.io/react/docs/events.html#media-events):
26
+
The simplest way to use this component is to use the default player that is provided.
You can configure, customize and modify the controls by adding, removing and shuffling them as you desire. You can create your very own custom children components and controls that can interact with the video. All children components will receive [these props](#props-and-methods). Obviously you can still call methods and set properties on the HTML5 DOM element directly if you have access to it with `refs`:
46
+
If you want to get creative and create your own video player then you will need to use the high order component. The HoC connects a React component to all the [HTML5 video attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) and the [HTMLMediaElement](https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement) of the first video it finds in the component it is wrapping.
<h1>Optional HTML and components can be added also</h1>
58
-
<CustomComponent />
59
-
60
-
/* As soon as a child is supplied that is not a `<source>`
61
-
you have to define all controls and overlays as the default
62
-
controls will have been removed. They are however exported
63
-
and can be re-applied as below in any order. */
64
-
<Overlay />
65
-
<Controls>
66
-
<Play />
67
-
<Seek />
68
-
<Time />
69
-
<Mute />
70
-
<Fullscreen />
71
-
<CustomControlComponent />
72
-
</Controls>
73
-
</Video>
74
-
);
75
-
}
55
+
</video>
56
+
<p>
57
+
Here are the video properties for the above HTML5 video:
58
+
{ JSON.stringify(video) }
59
+
</p>
60
+
<a href="#" onClick={(e) => {
61
+
e.preventDefault();
62
+
// You can do what you like with the HTMLMediaElement DOM element also.
63
+
videoEl.pause();
64
+
}}>
65
+
Pause video
66
+
</a>
67
+
</div>
68
+
);
69
+
70
+
exportdefaultvideoConnect(MyVideoPlayer)
76
71
```
77
72
78
-
## i18n
79
-
80
-
There is some text used that could require translations. This can be done like so:
73
+
The above will simply print out the properties of the HTML5 `<video>` within `MyVideoPlayer`. Now you have these properties and the HTMLMediaElement itself available in your component, it is up to you to create your new custom controls using them. See the default player as an example.
81
74
82
-
```js
83
-
<Video copyKeys={{ key: value }}>
84
-
```
75
+
#### API
85
76
86
-
The default english `copyKeys` can be found in [here](https://github.com/mderrick/react-html5video/tree/master/src/assets/copy.js).
77
+
The API behaves much like the [React Redux](https://github.com/reactjs/react-redux/) connect HoC but instead of using dispatch to change the state, we have access to the [HTMLMediaElement](https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement).
The custom controls provided are built using `<button>` and `<input type="range">` which means basic keyboard controls are available when they are focused. For example, you can and hit the space bar on mute, play and fullscreen buttons as well as seek using the arrow keys when focused on the slider. All inputs have a visible focus outline and can be tabbed to. `aria-label`attributes for screen readers have been used where user interaction is required. Try tabbing through the [demo](http://mderrick.github.io/react-html5video/) with [Vox](http://www.chromevox.com/) enabled.
81
+
-`mapStateToProps(videoState, ownProps)` - Use this to return the [HTML5 video attributes](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) required for your component. The plain object returned here will be merged with what is returned from `mapVideoElToProps`using the `mergeProps` function. By Default this returns all video attributes so they are accessible on `this.props.video` in your wrapped component.
91
82
92
-
*Disclaimer: Unfortuantely I don't much experience with a11y but I have tried to use some of the features from [PayPal's accessible HTML5 player](https://github.com/paypal/accessible-html5-video-player). If anyone has further input on this please raise an issue or a pull request.
83
+
-`mapVideoElToProps(videoEl, videoState, ownProps)` - Use this to return a plain object that uses `videoEl` to update the videos state. `videoEl` is the raw [HTMLMediaElement](https://developer.mozilla.org/en/docs/Web/API/HTMLMediaElement). The object returned here will be merged with what is returned from `mapStateToProps` using the `mergeProps` function. By default the `videoEl` will be accessible on `this.props.videoEl` in your wrapped component.
93
84
94
-
95
-
## Props and Methods
96
-
97
-
All children components will receive the following properties via props:
98
-
-`copyKeys`
99
-
-`duration`
100
-
-`currentTime`
101
-
-`buffered`
102
-
-`paused`
103
-
-`muted`
104
-
-`volume`
105
-
-`playbackRate`
106
-
-`percentageBuffered`
107
-
-`percentagePlayed`
108
-
109
-
All children components receive the following methods via props:
110
-
-`play`
111
-
-`pause`
112
-
-`togglePlay`
113
-
-`mute`
114
-
-`unmute`
115
-
-`toggleMute`
116
-
-`seek`
117
-
-`fullscreen`
118
-
-`setVolume`
119
-
-`setPlaybackRate`
85
+
-`mergeProps(stateProps, videoElProps, ownProps)` - If specified, it is passed the result of `mapStateToProps``mapVideoElToProps` and the parent `props`. The plain object you return will be passed to your wrapped component. By default this will do `Object.assign({}, stateProps, videoElProps, ownProps)`.
120
86
121
87
## Contributing
122
88
@@ -130,15 +96,5 @@ To run a development server with HMR:
130
96
$ npm start
131
97
```
132
98
133
-
### Issues
134
-
135
-
Feel free to raise and solve any existing issues as desired. Where possible please do try and replicate any bugs you may have using the [react-html5video jsfiddle](https://jsfiddle.net/mderrick/7s9a311q/1/) and include them in your ticket.
0 commit comments