jquery - 用 css 隐藏 html5 视频控件？

Question

我有一个如下所示的 html5 视频部分，我想隐藏控件。我已经使视频 div 可点击以显示一个“模态”层，它以更大的尺寸播放视频。我已经完成了打开“模态”并播放视频的编码。有没有办法用 css 隐藏控件，这样我就可以让它们再次可见以进行响应式设计？

<video id="sampleMovie2" controls>
<source src="video.mp4" type="video/mp4" />
</video>

Answer 1

如果您使用 HTML 元素创建控件并使用 JS 将控件绑定(bind)到 video，那么使用 CSS 您可以定位所需的 device media 宽度并隐藏它们元素。

否则不行
但是使用 JS，您可以根据窗口宽度切换 controls 属性:

jsBin demo

var $vid = $("#sampleMovie2");

function showControlsAt600() {
    $vid.prop( "controls", $(window).width() >= 600 );
}


showControlsAt600();
$(window).on("resize", showControlsAt600);