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

【问题标题】：player.markers is not a function error while using videojs markers使用 videojs 标记时 player.markers 不是函数错误
【发布时间】：2017-01-24 11:22:35
【问题描述】：

我想将标记添加到我的 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);

这些是markers.js插件代码的行，它们会抛出videojs未定义错误

    };
    }

    videojs.plugin('markers', registerVideoJsMarkersPlugin);


})(jQuery, window.videojs);

我应该如何解决它才能看到播放器上的标记？

【问题讨论】：

标签： javascript reactjs video.js markers

【解决方案1】：

我想你忘了把 ref 放在 video 标签中。

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

【讨论】：

assign(props, { ref: 'video', controls: true, }); 中已经存在
对不起，我没有注意到。我很想知道如何将 ref 键添加到道具。这是否像 object.assign 一样工作。

【解决方案2】：

在 Angular 的情况下，我们必须将 .js 代码导入到组件的 typescript 文件中，如下所示：

import 'videojs-markers';

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

【讨论】：