# MVideo 视频播放

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/video/freepass)
- 平台：移动端
- 维护者：屈正巍
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s5
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Video]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react'
import { MVideo, MButton, constantsM } from '@weapp/ui'

const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-video`;

class VideoDemo extends Component<any, any> {

  showVideo = () => {
    MVideo.showVideo('')
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>基础用法</h4>
        <MVideo
          controls
          width={'100%'}
          useVideoJs
          src={''}
        />
        <h4>通过MVideo.showVideo方法打开</h4>
        <MButton onClick={this.showVideo}>预览视频</MButton>
      </div>
    );
  }
}

export default VideoDemo;
```

### 打开新页面播放

将播放器放于弹层中，可使用customRender自定义渲染触发器

```jsx
import { Component } from 'react';
import { withRouter } from "react-router-dom";
import { MVideo, constantsM } from '@weapp/ui';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-video`;

// @ts-ignore
@withRouter
class VideoDemo extends Component<any, any> {

  customRender = (_this: any, content: any) => {
    return <button>自定义触发器</button>
  }

  render() {
    return (
      <div className={prefixCls}>
        <MVideo
          isDialog
          controls
          routeId={'ces'}
          src={'https://cloudstore.e-cology.cn/page/resource/userfile/video/tuzi.mp4'}
        />
        <br />
        <br />
        <MVideo
          isDialog
          controls
          poster={'/build/ui/demo/assets/photo-view/2.jpeg'}
          src={'https://cloudstore.e-cology.cn/page/resource/userfile/video/tuzi.mp4'}
          customRender={this.customRender}
        />
      </div>
    );
  }
}

export default VideoDemo;
```

### videojs

引入三方媒体插件

```jsx
import { Component } from 'react'
import { MVideo, constantsM } from '@weapp/ui'

const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-video`;

class VideoDemo extends Component<any, any> {
  render() {
    return (
      <div className={prefixCls}>
        <MVideo
          controls
          width={'100%'}
          useVideoJs
          src={''}
        />
      </div>
    );
  }
}

export default VideoDemo;
```

## API

### 注意：

```typescript
弹窗模式下:
1.如果设置了 width，将 video 高度将根据 width 自适应；
2.如果设置了 heigth，video 高度将根据 height 自适应;
3.两者同时设置，以 width 优先；两者都没有设置，将使用视频本身的高度。
```

### 使用videojs说明：

```typescript
1.如果采用videojs模式，可以参考demo4中，采用ref的形式拿到Video中的player，并调用相对应的方法对视频播放进行控制
2.更详细的使用说明见pc端的video
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| isDialog | 是否为弹出视频 | boolean | 否 |  |
| src | 视频 url | string | 否 |  |
| poster | 海报帧 url | string | 否 |  |
| width | video 宽度 | number | 否 |  |
| height | video 高度 | number | 否 |  |
| controls | 是否提供用户控制 | boolean | 否 | true |
| autoPlay | 视频是否马上自动开始播放 | boolean | 否 | false |
| loop | 是否循环播放 | boolean | 否 | false |
| muted | 是否默认静音 | boolean | 否 | false |
| preload | 预加载配置项 | 'auto/metadata/none' | 否 | 'auto' |
| dialogProps | 弹窗自定义配置 | 参考 MDialog 组件 Props | 否 |  |
| onOpen | 弹窗模式打开回调 | () => void | 否 |  |
| onClose | 弹窗模式关闭回调 | () => void | 否 |  |
### MVideo.showVideo

通过 function 调用方式预览视频

```typescript
//其中otherParams为需要传递的参数
function showVideo(src?: string, otherParams?: AudioProps){
  ...
}
```
