react-app-shell
Version:
react打包脚本和example, 这里的版本请忽略
68 lines (60 loc) • 1.87 kB
JavaScript
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Player} from 'video-react';
import 'video-react/dist/video-react.css';
import styles from './styles.less';
/**
* 视频
*/
class VideoPlay extends Component {
static propTypes = {
videoUrl: PropTypes.string.isRequired, // 活动开始时间
};
/**
* 点击播放图标播放
*/
handelVideoPlay = () => {
this.refs.player.play();
this.handleBtnHide();
}
/**
* 展示图标
*/
handleBtnShow = () => {
this.refs.playBtn.style.display = 'block';
}
/**
* 隐藏图标
*/
handleBtnHide = () => {
this.refs.playBtn.style.display = 'none';
}
handlePause = () => {
this.refs.player.load();
}
render() {
const {videoTitle, videoUrl} = this.props;
const posterUrl = videoUrl + '?x-oss-process=video/snapshot,t_0000,f_jpg,w_0,h_0,m_fast'; // 获取视频poster Image
return (
<div className={styles['play-video']}>
<p>{videoTitle}</p>
<div className={styles['video-body']}>
<div className={styles['play-btn']} ref={'playBtn'} onClick={this.handelVideoPlay}/>
<Player
className={styles['item-video']}
ref={'player'}
fluid
aspectRatio={'16:9'}
poster={posterUrl}
src={videoUrl}
onCanPlay={this.handleBtnShow}
onWaiting={this.handleBtnHide}
onPlaying={this.handleBtnHide}
onPause={this.handlePause}
/>
</div>
</div>
);
}
}
export default VideoPlay;