如何在视频窗口中获取 html 视频控件答案

【问题标题】：How to get html video controls inside the video window如何在视频窗口中获取 html 视频控件
【发布时间】：2014-10-20 00:19:27
【问题描述】：

抱歉，如果之前有人问过这个问题（我确实尝试过搜索）。我在页面上嵌入了一个 HTML 视频，并且播放器控件显示在视频窗口之外。我想将它们放在视频窗口中，但我似乎找不到可用于控件属性的任何自定义。

我知道 HTML <video> 标记不是很可定制，但我已经看到许多 HTML 视频以所需的方式显示（控件在视频窗口内部，而不是在外部），所以我认为这是可能的。

我正在尝试做的示例：http://easyhtml5video.com/

目前的外观：

【问题讨论】：

你用的是什么浏览器？它默认出现在我的内部：jsfiddle.net/prankol57/pw8jgp4h
你能发布一些 HTML 吗？如果没有，this 似乎展示了许多自定义 HTML5 视频播放的方法。
我默认使用 chrome。但要澄清一下，它在easyhtml5video.com 上的显示方式是我正在寻找的（并且它确实显示在我的内部）。附图是我当前的项目，很遗憾没有显示在里面
现在视频的 html 是：
@rom-dos 你能发个 jsfiddle 吗？另外，实际视频的大小是多少（我怀疑这很重要，但它可能很重要）？

标签： html video

【解决方案1】：

看来height 属性是问题所在。

没有高度属性：

<video controls="" id="videoelement" width="480" style="margin:auto; padding-left:107px" webkit-playsinline="">
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
    <source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
    <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>

带高度属性：

<video controls="" id="videoelement" width="480" height="360" style="margin:auto; padding-left:107px" webkit-playsinline="">
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
    <source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
    <source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>

height 属性应该是视频的实际height。

【讨论】：

完全删除 height 属性给了我想要的结果。谢谢！
@rom-dos 如果这个答案对您有帮助，请考虑接受它（在 upvote/downvote 按钮下方检查复选标记）。没有义务这样做（如果您不想这样做，则不必这样做）。

【解决方案2】：

video 标签的height 应该与实际视频分辨率的高度相匹配......

这里是FIDDLE

在此视频分辨率为604px X 256px 如果视频标签有604x256，那么控件会留在里面，如果我将height 更改为356，如小提琴中所示，那么控件就会出现在视频之外。

您可能需要检查视频分辨率并将其与视频标签的高度进行比较。

但不确定宽度是否重要。

【讨论】：