rc-video-modal

react 视频弹窗播放组件

github 仓库地址

点击前往 rc-video-modal github 地址

rc-video-modal 可以方便的实现点击某个按钮或者区域来弹窗播放视频的效果

演示地址

戳这里前往 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 };