2017-01-24 4 views
0

Я хочу добавить маркеры в мой видеоигр игрока. Я видел, как его реализовать, и уже реализовал его несколько месяцев назад, и он работал в то время. Теперь в моем другом проекте я хочу использовать то же самое. Но это дает мне ошибки в консоли, как это (ниже), и я не могу видеть свои маркеры на временной шкале игрока.player.markers не является ошибкой функции при использовании маркеров videojs

enter image description here enter image description here

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); 

и эти строки markers.js код плагина, который метание videojs не определен ошибке

}; 
    } 

    videojs.plugin('markers', registerVideoJsMarkersPlugin); 


})(jQuery, window.videojs); 

Как я должен решить, так что я могу увидеть маркеры на моем плеере?

ответ

0

Я думаю, что вы забыли поставить ref в теге видео.

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

Это уже есть в правопреемника (реквизита, { исх: 'видео', управления: истинные, }); – ApurvG

+0

Извините, я этого не заметил. Мне любопытно узнать, как это добавляет ключ ref к реквизитам. Это работает как object.assign. – duwalanise