0.2.5 • Published 5 months ago
rc-video-modal v0.2.5
rc-video-modal
react 视频弹窗播放组件
github 仓库地址
rc-video-modal 可以方便的实现点击某个按钮或者区域来弹窗播放视频的效果
演示地址
版本说明
- 0.2.0 第一个版本
使用文档
安装
npm install --save rc-video-modal在需要使用的地方导入使用
import VideoModal from 'rc-video-modal';
const App = () => {
return (
<div>
<VideoModal
autoPlay={false}
controls
loop={false}
muted
width={'50%'}
src="https://fastmock.cn-bj.ufileos.com/video/video_fastmock-1.mp4"
>
<button
style={{
background: 'blue',
color: '#fff',
height: 40,
border: 'none',
borderRadius: '5px',
padding: '0 12px',
}}
>
播放视频
</button>
</VideoModal>
</div>
);
};props
| 参数 | 说明 | 类型 | 必须 |
|---|---|---|---|
| title | 视频的名称，显示在视频弹窗左上角 | string | true |
| src | 视频地址 | string | true |
| width | 视频宽度 | string | false |
| children | 用于打开视频的按钮或其他内容 | string | false |
| autoPlay | 视频是否自动播放 | boolean | false |
| controls | 是否显示视频控件 | boolean | false |
| loop | 是否循环播放 | boolean | false |
| muted | 视频是否静音 | boolean | false |
| showClose | 是否需要右上角的关闭按钮 | boolean | false |
| closeOnClickMask | 点击阴影部分是否关闭视频 | boolean | false |
示例：
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import VideoModal from 'rc-video-modal';
const App = () => {
return (
<div>
<VideoModal
autoPlay={false}
controls
loop={false}
muted
width={'50%'}
src="https://fastmock.cn-bj.ufileos.com/video/video_fastmock-1.mp4"
>
<button
style={{
background: 'blue',
color: '#fff',
height: 40,
border: 'none',
borderRadius: '5px',
padding: '0 12px',
}}
>
播放视频
</button>
</VideoModal>
</div>
);
};
export { App };