在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:mderrick/react-html5video开源软件地址:https://github.com/mderrick/react-html5video开源编程语言:JavaScript 94.1%开源软件介绍:react-html5videoA customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y. V2 API has changed and is not backwards compatible. You can find the old documentation here. View the demo. Install
Peer Dependencies
UsageSimple UsageThe simplest way to use this component is to use the default player that is provided. It works the same way as a normal HTML5 video by taking all the supported HTML5 video attributes except for 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={() => {
// Do stuff
}}>
<source src="http://sourcefile.webm" type="video/webm" />
<track label="English" kind="subtitles" srcLang="en" src="http://source.vtt" default />
</Video>
);
} a11y* and i18nThe custom controls provided are built using You can change translate the <Video copy={{ key: value }}> The default english *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. If anyone has further input on this please raise an issue or a pull request. Advanced UsageIf you want to get creative and create your own video player then you will need to use the higher order component. The HoC connects a React component to all the HTML5 video attributes and the HTMLMediaElement of the first video it finds in the component it is wrapping. import videoConnect from 'react-html5video';
const MyVideoPlayer = ({ video, videoEl, children, ...restProps }) => (
<div>
<video {...restProps}>
{ children }
</video>
<p>
Here are the video properties for the above HTML5 video:
{ JSON.stringify(video) }
</p>
<a href="#" onClick={(e) => {
e.preventDefault();
// You can do what you like with the HTMLMediaElement DOM element also.
videoEl.pause();
}}>
Pause video
</a>
</div>
);
export default videoConnect(MyVideoPlayer) The above will simply print out the properties of the HTML5 APIThe API behaves much like the React Redux connect HoC but instead of using dispatch to change the state, we have access to the HTMLMediaElement.
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论