使用videojs标记时，player.markers不是函数错误

Question

我想在我的videojs播放器timelime中添加标记。我已经看到了如何实现它并且几个月前已经实现了它并且它在那个时候工作了。现在在我的其他项目中我想使用相同的。但它在控制台中给出了我这样的错误（如下），我无法在播放器时间轴上看到我的标记。

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

我应该如何解决这个问题，以便能够在播放机上看到标记？

Answer 1

我想你忘了把ref放在视频标签上。

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

Answer 2

在角度情况下，我们必须将.js代码导入组件打字稿文件，如下所示：

import 'videojs-markers';

检查您的情况是否也是必要的。