当宽度变窄时，VideoJS 控件（CC、音频）是否应该出现在视频元素下方？答案

【问题标题】：Should VideoJS controls (CC, audio) appear below the video element when width gets narrow?当宽度变窄时，VideoJS 控件（CC、音频）是否应该出现在视频元素下方？
【发布时间】：2015-04-24 23:00:46
【问题描述】：

当视频宽度较窄时，页面右下角的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 控件时，控件会出现在元素下方。但我不希望有这个硬编码。如果可能的话，我宁愿根据实际阈值计算适当的最小宽度。

【问题讨论】：

标签： javascript video width controls video.js

【解决方案1】：

你只需要在控制栏中隐藏溢出

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

我在这里设置了一个示例小提琴：http://jsfiddle.net/kuhmaty9/2/

【讨论】：

谢谢。这有助于避免在播放器变窄时显示溢出的控件。我仍然很想知道是否有办法确定控件开始溢出（或消失）的最小播放器宽度。我想通过防止播放器在调整大小时变窄来避免控件溢出/消失。
我确信这是可能的，但我认为它太复杂了。您必须考虑缩放级别（因为 videojs 中的所有大小都在 em 中）。此外，显示的控件取决于设备。我建议根据您的视频何时变小来选择最小宽度，以获得合理的用户体验。
谢谢。我确实将视频元素包装在一个 div 中，并通过实验将 min-width 设置为 385px，这似乎避免了当我在控制栏中同时具有 CC 和 PlaybackRates 时控件的溢出/消失。这种方法可以解决问题，但我希望采用一种不那么硬编码的方法。
根据这里的建议，我在vjs-control-bar中也设置了overflow:hidden，但是今天升级到使用5.4.6的时候，发现有剪裁的效果搜索栏位置指示器的顶部（不确定它们的正式名称是什么），所以我删除了溢出：隐藏并且我只是在 div 中使用了最小宽度。

【解决方案2】：

这似乎是浏览器的问题。尝试使用 video.js。 (http://www.videojs.com/)

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

希望对你有帮助

【讨论】：

这正是我在页面上使用的 video.js 脚本。 videojs.com 主页使用：。这两个版本在 Chrome 和 IE 11 上都表现出相同的行为。