videojsマーカーを使用しているときにplayer.markersが関数エラーではありません

Question

私のvideojsプレーヤーのタイムラインにマーカーを追加します。私はそれを実装する方法を見て、すでに数ヶ月前にそれを実装し、それはその時に働いた。今私の他のプロジェクトでは、同じものを使用したいと思います。しかし、このようなコンソールで私にエラーを与えている（下記）と、私はプレーヤーのタイムラインに自分のマーカーを見ることができません。

class Player extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      player: {} 
     }; 
    } 
componentDidMount() { 
    var self = this; 
    var player = videojs(this.refs.video, this.props.options).ready(function() { 
     self.player = this; 
     self.player.on('play', self.handlePlay); 
    }); 

    // $.get('URL-TO-FETCH-DATA-FROM', function(result) { 
    //  if (this.isMounted()) { 
    //   this.setState({ 
    //    dataVar1: result 
    //   }); 
    //  } 
    // }.bind(this)); 

    if (this.props.onPlayerInit) this.props.onPlayerInit(player); 





    player.markers({ 
     markerStyle: {}, 
     markers: this.props.marker_store, 
     onMarkerReached: function() { 
      // player.pause(); 
     }, 
    }); 
    this.setState({player: player}); 

} 



handlePlay() { 
    console.log("handle play ") 

} 

render() { 
    var props = blacklist(this.props, 'children', 'className', 'src', 'type', 'onPlay'); 
    props.className = cx(this.props.className, 'videojs', 'video-js vjs-default-skin', 'vjs-big-play-centered'); 


    assign(props, { 
     ref: 'video', 
     controls: true, 
    }); 

    return (
      <video {... props}> 
       <source src={videoSrc} type="video/mp4"/> 
      </video> 
     ) 
} 
} 

const mapStateToProps = (state) => { 
    return { 
     marker_store:state.markerReducer 
    }; 
}; 

export default connect(mapStateToProps)(Player); 

及びこれらの私がすることができる午前ように定義されていないvideojsを投げているコードをプラグインmarkers.jsのラインエラー

}; 
    } 

    videojs.plugin('markers', registerVideoJsMarkersPlugin); 


})(jQuery, window.videojs); 

は、どのように私はそれを解決する必要がありますされています私のプレーヤーのマーカーを見ますか？

Answer 1

あなたはビデオタグにrefを入れるのを忘れたと思います。割り当てに既に存在（小道具、{ 'ビデオ'、 コントロール： REF真、 }）である

<video ref="video" {... props}> 
    <source src={videoSrc} type="video/mp4"/> 
</video>