16:8 比例因 video.js 默认皮肤而中断答案

【问题标题】：16:8 ratio disrupts with video.js default skin16:8 比例因 video.js 默认皮肤而中断
【发布时间】：2017-01-22 07:34:30
【问题描述】：

我在我的反应应用程序中使用 videojs。我有一个 16:8 比例的 div 包装器。问题是视频 js 播放器没有显示默认皮肤。但是我有其他代码实现了默认皮肤，但容器 div 的比例为 16:8。这是我的代码，它不显示默认皮肤

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 的比例

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

【问题讨论】：

标签： javascript reactjs video.js

【解决方案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 将播放按钮居中 ?

希望对你有帮助??

【讨论】：