Videojs原始时间轴不会到来

Question

我在我的应用程序中使用videojs。我在video-wrapper div中包装了视频标签，使其成为父div的大小，即视频包装器。但问题是我无法看到它附带的videojs的实际时间线。 Chrome正在添加它自己的时间轴。这是我的代码

return (
            <div className="video-wrapper">
                <video id="example_video_1" controls preload="auto" className="video-js vjs-default-skin" data-setup='{"fluid":true}'>
                    <source src={videoSrc} type="video/mp4"/>
                </video>
            </div>)

这是css

.video-wrapper {
        background: white;
        position: relative;
        padding-bottom: 50% ;
        /* 16:8 */
        padding-top: 25px;
        height: 0;
    }

    .video-wrapper > video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

这是我得到的结果（查看视频时间轴。它不是视频时间轴）

这就是我想要播放器时间轴的样子。它也应该适合视频包装。 （虽然下面的图片尺寸搞砸了）

这个代码是（但没有响应）

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,
            height:"650",
            width:"800"
        });

        if (this.props.tags.flag) {
            this.jumpToSpecificMarker();
            console.log("card clicked was" + this.props.card_Reducer.card_id);
        }
        return (
            <div>
                <video{... props}>
                    <source src={this.props.src} type="video/mp4"/>
                </video>

                {/*<button onClick={this.jumpToSpecificMarker.bind(this)}>next</button>*/}
                {/*<button onClick={this.prev.bind(this)}>prev</button>*/}
            </div>)

    }