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

Question

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

我知道HTML <video>代码无法自定义，但我看到许多HTML视频以所需方式显示（控件在视频窗口内） ，而不是在外面），所以我认为它是可能的。

我尝试做的例子：http://easyhtml5video.com/

目前看起来如何：

Answer 1

height标记的

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

这是FIDDLE

此处视频分辨率为604px X 256px 如果视频代码有604x256，则控件会保留在内，如果我将height更改为356（如小提琴中所示），则控件将移出视频。

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

不确定宽度是否重要。

Answer 2

height属性似乎是问题所在。

没有height属性：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

使用height属性：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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