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

Question

当视频宽度较窄时，页面右下方的VideoJS控件（如CC、音频等）出现在视频元素下方。这可以在 videojs.com 主页上通过缩小浏览器 window 并将鼠标悬停在视频上以查看控件来演示。我在 IE 11 和 Chrome 上试过，结果相同。

这是预期的行为吗？如果是这样，是否有一种简单的方法 CSS and/or JavaScript 到 control/detect/calculate 最小宽度，这样我就可以防止视频元素宽度变得小到足以让控件出现在视频元素下方？我的一些视频有 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 中的最小宽度设置为 385px。当存在 CC 和 playbackRates 控件时，这可以防止视频元素变得足够窄，从而使控件出现在元素下方。但我不想对此进行硬编码。如果可能的话，我宁愿根据实际阈值计算合适的最小宽度。

Answer 1

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

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

希望这对您有所帮助

Answer 2

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

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

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

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

Should VideoJS controls (CC, audio) appear below the video element when width gets narrow?

javascript

video

controls

width

video.js