Question

我正在研究reactjs应用程序。我正在使用videojs。我在samme页面上有一个表格，其中有videojs。每行都有一个时间列。

所需的输出：当我点击任意一行时，视频js currentTime应设置为该行的相应时间列

我尝试了什么：我使用了redux。当我点击任何一行时，我会发出一个动作。

 <tr onClick={()=>this.sentance_click(item.time)}>

sentance_click(time){
        console.log("clicked with time " + time)
        this.props.sentanceSelectedAction(time)


    }

sentanceClickAction是

export const sentanceSelectedAction= (time) => {
    return {
        type: 'SENTANCE_CLICKED',
        time: time
    }
};

此操作由reducer监听。 reducer有一个名为flag的变量。它的初始化值是错误的。现在，每当我单击该行时，它都会调度该操作并将reducer中的标志变量设置为true。

const initialState ={
    sentanceTime:0,
    flag:false
}
export default function (state = initialState, action) {
    switch(action.type){
        case 'SENTANCE_CLICKED' :
            state = {...state, sentanceTime: action.time, flag:true}
    }
    return state;
}

现在在我的视频组件中，我检查这个标志，如果这是真的，那么调用一个方法，将玩家的当前时间设置为该行的时间。但是我在我的渲染方法中检查那个标志

render() {

        if (this.props.sentance_selected_reducer.flag) {
            // this.jumpToSpecificMarker();
            // this.state.player.pause();
            this.skipTime
        }

并且跳过时间函数在渲染方法之外

skipTime(){
        console.log("inside skip")
        player.currentTime(10)

    }

播放器变量在类之外声明。这就是我如何初始化我的videojs

componentDidMount = ()=> {
        this.init()
    }


    init = ()=> {
        this.initVideoJS()
    }


    initVideoJS = ()=> {
        var self = this;
        var that = this;
        debug('Init VideoJS')
        const options = {
            fluid: true,
            preload: false,
            autoplay: false,
            controls: true,
            aspectRatio: "16:9"
        }

        this.video = player = videojs(this.video_el, options).ready(function () {
            self.player = this;
            self.player.on('play', that.handlePlay);
        });

结果：我收到错误消息，说无法读取属性＆＃34; currentTime＆＃34;未定义的

跳过视频播放器当前时间点击一行表格

0 个答案: