UNPKG

react-app-shell

Version:

react打包脚本和example, 这里的版本请忽略

68 lines (60 loc) 1.87 kB
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;