javascript - 当宽度变窄时，VideoJS 控件(CC、音频)是否应该出现在视频元素下方？

Question

当视频宽度较窄时，右下角的VideoJS控件(例如CC、音频等)出现在页面视频元素下方。这可以在 videojs.com 主页上进行演示，方法是缩小浏览器窗口并将鼠标悬停在视频上以查看控件。我在 IE 11 和 Chrome 上尝试过，结果相同。

这是预期的行为吗？如果是这样，CSS和/或JavaScript中是否有一种简单的方法来控制/检测/计算发生这种情况的最小宽度，以便我可以防止视频元素宽度变得足够小以使控件出现在视频下方元素？我的一些视频有 CC 轨道，有些则没有。有些启用了playbackRates 控件，有些则没有。

我目前使用以下代码来调整 16:9 视频的大小，因此理想情况下，如果可能的话，我希望在此处强制执行最小宽度:

videojs("embvid", { "height": "auto", "width": "auto" }).ready(function () {
    // Get the video player object.
    var videoPlayer = this;
    // Get the player's parent element.
    var parent = document.getElementById(videoPlayer.id()).parentElement;
    // Video's aspect ratio (HD).
    var aspectRatio = 9 / 16;

    function resizeVideoJS() {
        // Find the parent's current width.
        var width = parent.offsetWidth;
        videoPlayer.width(width).height(width * aspectRatio);         
    }

    // Initialize the size by calling once.
    resizeVideoJS();
    // Call again on every resize event.
    window.onresize = resizeVideoJS;});

编辑:videojs 主页使用:

<script src="//vjs.zencdn.net/4.12.5/video.js"></script>

我的页面使用:

<script src="http://vjs.zencdn.net/4.12/video.js"></script>

两个版本在 Chrome 和 IE 11 上都表现出相同的行为。

我将视频元素包装在一个 div 中，并通过实验，将此 div 中的 min-width 设置为 385px。当存在 CC 和playbackRates 控件时，这可以防止视频元素变得足够窄而使控件出现在元素下方。但我不希望对此进行硬编码。如果可能的话，我宁愿根据实际阈值计算适当的最小宽度。

Answer 1

您只需隐藏控制栏中的溢出

.vjs-control-bar {
    overflow: hidden;
}

我在这里设置了一个示例 fiddle :http://jsfiddle.net/kuhmaty9/2/