video的相关属性

video标签

  <video ref={this._videoPlayerRef} className='player' src={videoUrl} preload='preload' autoPlay onClick={this.handlePlay}></video>

ref

  private _videoPlayerRef: React.RefObject<HTMLVideoElement>; //播放器
  this._videoPlayerRef = React.createRef();

事件监听

 if (this._videoPlayerRef.current) {
        // video加载完成
        this._videoPlayerRef.current.addEventListener('canplaythrough', this.updateDurationTime, false);
        //实时监测当前播放时间
        this._videoPlayerRef.current.addEventListener('timeupdate', this.updateCurrentTime, false);
        //检测视频播放完成
        this._videoPlayerRef.current.addEventListener('ended', this.handleVideoEnded, false);
        window.addEventListener('resize', this.isFull, false);
        this._videoPlayerRef.current.play();
    }

视频的播放与暂停

if (this._videoPlayerRef.current) {
    this._videoPlayerRef.current.play();
    this._videoPlayerRef.current.pause();
}

视频缓冲

// 视频缓冲进度
private handleVideoBuffer = () => {
    if (this._videoPlayerRef.current) {
        let allBuffered = 0;
        if (this._videoPlayerRef.current.buffered.length != 0) {
            allBuffered += this._videoPlayerRef.current.buffered.end(0);
        }
        if (allBuffered >= this.getTime().durationTime) {//缓存完
            this.setState({
                bufferWidth: '100%',
            });
        } else {
            const percentage = this.calcProgressRatio(allBuffered, this.getTime().durationTime);
            this.setState({
                bufferWidth: `calc(${percentage} + 1px)`,
            });
        }
    }
}

播放速度

if (this._videoPlayerRef.current) {
    this._videoPlayerRef.current.playbackRate = Number(value);
}

音量

 private handleVolume = (value: number) => {
    if (this._videoPlayerRef.current) {
        if (Number(value.toFixed(1)) === 0) {
            this._videoPlayerRef.current.muted = true;
            this.setState({
                volumeMuted: true,
            });
        } else {
            this._videoPlayerRef.current.muted = false;
            this.setState({
                volumeMutedIcon: false,
                volumeValue: Number(value.toFixed(2)),
            });
            this._videoPlayerRef.current.volume = Number(value.toFixed(1));
        }
    }
}

全屏

    // control fullscreen and exitFullscreen
    private handleScreenSize = () => {
        this.setState({
            fullScreen: !this.state.fullScreen,
        }, () => {
            if (this.state.fullScreen) {
                this.fullScreen();
            } else {
                this.exitFullscreen();
            }
        });
    }

    public isFull = () => {
        if (this._playerConRef.current) {
            const playerConW = this._playerConRef.current.getBoundingClientRect().width;
            const domW = document.body.clientWidth;
            if (domW > playerConW) {
                this.setState({
                    fullScreen: false,
                });
            }
        }
    }

    //fullscreen
    private fullScreen = () => {
        const ele = this._playerConRef.current || document.documentElement;
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.webkitRequestFullScreen) {
            ele.webkitRequestFullScreen();
        }
    }

    //exitFullscreen
    private exitFullscreen = () => {
        const de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    }