控件切断Chrome中的窄视频

Question

当尝试嵌入比约200px窄的视频时，Chrome中会切断“全屏”控制。 Safari和Firefox没有这个问题（Firefox确实如此，但至少你可以通过菜单右击并全屏播放）。有什么方法可以强制控制显示Chrome？这是示例html：

<video width="200" controls>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

这是一个小提琴：https://jsfiddle.net/ba7kfp02/

Answer 1

在HTML5视频上展示哪些控制以及何时展示它们（不幸的是）可供浏览器供应商解读。

如果您确实需要将视频更改为“全屏”的按钮，则可以使用Full Screen API通过JavaScript进行操作。从那里引用，所有按钮必须做的是调用以下函数（添加了一些样板来支持浏览器支持）。

document.getElementById("myvideo").requestFullscreen();

如果您需要将此按钮作为视频的叠加层，则可以移除原生控件（在视频元素上调用removeAttribute("controls");）并将其替换为自定义控件，如Mozilla Japan video pages所示

交互式代码示例位于Codepen。