Question

我在我的反应应用程序中使用videojs。我把它包装在一个比例为16：8的div中。问题是视频js播放器没有显示出令人沮丧的皮肤。但是我有其他代码实现默认皮肤但是以16：8的容量div比例搞定。这是我的代码，它没有显示默认皮肤

render() {

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

这是玩家的样子

这是样式代码

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

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

这是默认videojs皮肤的代码

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 (
            <div className="video-wrapper">
                <video{... props}>
                    <source src={videoSrc} type="video/mp4"/>
                </video>
            </div>)
    }

以及它呈现的内容（皮肤是我想要的），但它会破坏wrapper-div的配给

有什么问题？如何通过第一个代码带来默认皮肤？

Answer 1

解决问题真的很容易

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

我希望它对你有用我会在第一个代码中告诉您问题所在。它没有没有具有data-setup='{}' Videojs搜索包含data-setup='{}'的视频标签。没有它，我怀疑它是否有效（至少不适合我。）

这是解决方案：

render() {
        return (
            <div className="video-wrapper">
                <video id="example_video_1" controls="true" className="video-js vjs-default-skin vjs-big-play-centered">
                    <source src={videoSrc} type="video/mp4"/>
                </video>
            </div>)
    }

vjs-big-play-centered将播放按钮centers居中

希望这很有帮助??

videojs默认皮肤不起作用

1 个答案: