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

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

import React, {Component} from 'react';
import {Player} from 'video-react';
import 'video-react/dist/video-react.css';
import styles from './introduceTabs.less';

/**
 * 视频
 */
class VideoPlay extends Component {
    /**
     * 点击播放图标播放
     */
    handelVideoPlay = () => {
        this.refs.player.play();
        this.refs.playBtn.style.display = 'none';
    }

    /**
     * 隐藏图标
     */
    handleBtnHide = () => {
        this.refs.playBtn.style.display = 'none';
    }

    render() {
        const {videoTitle, url} = this.props.videoData;
        const posterUrl = url + '?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'}
                        playsInline
                        poster={posterUrl}
                        src={url}
                        onWaiting={this.handleBtnHide}
                        onPlaying={this.handleBtnHide}
                    />
                </div>
            </div>
        );
    }
}

export default VideoPlay;