react-app-shell/activity/src/views/special-group/component/videoPlay.js

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

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;