在componentDidMount

问题描述

我是ReactJS的新手。我正在尝试将VideoJS与react集成在一起。我要在此处实现的目标是，当用户观看完视频的前30秒后触发API调用。我正在使用称为timeCheck（）的方法监视时间。播放器实例是在componentDidMount（）生命周期下创建的。我面临的挑战是我无法从timeCheck（）方法访问玩家变量。

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

class VideoPlayer extends React.Component {

    componentDidMount() {
        this.player = videojs(this.videoNode,this.props,function onPlayerReady() {
            console.log('onPlayerReady',this)
        });
        this.player.on('timeupdate',this.timeCheck)
    }

    componentwillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }

    updateView() {
        console.log('Another view added')
    }

    timeCheck() {
        if (this.player.currentTime() > 50) {
            this.player.off('timeupdate',this.timeCheck)
            console.log('Breached 50 seconds...')
            this.player.trigger('Played50Seconds')
        }
        else {
            console.log('Counter ticking.....')
        }
    }

    render() {
        return (
            <div>
                <h3> It's a player component </h3>
                <div data-vjs-player>
                    <video ref={node => this.videoNode = node} className="video-js"></video>
                </div>
            </div>
        )
    }
}

export default VideoPlayer

错误消息

index.js：1 VIDEOJS：错误：TypeError：this.player.currentTime不是 功能 在Player.timeCheck（VideoPlayer.js：25） 在HTMLdivelement.data.dispatcher（video.es.js：1899） 在触发时（video.es.js：2035） 在Player.trigger $ 1 [作为触发器]（video.es.js：2921） 在播放器上。 [作为handleTechTimeupdate_]（video.es.js：25658） 在HTMLVideoElement.data.dispatcher（video.es.js：1899）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）