控制栏比HTML5 + CSS中的视频宽 [英] Control bar wider than video in html5 + css
问题描述
我尝试在html5中包括width和height属性，以操纵视频帧的尺寸，但似乎并没有与控制栏成比例地变大或变小。我的意思是，视频的控制栏（带有播放/暂停和音量控制的控制栏）似乎比实际的视频帧宽很多，看起来很尴尬，所以我想知道可以使控制栏和视频框同样宽。我认为几个屏幕快照将使我所遇到的问题更加清晰。
I tried including the width and height attributes in html5 to manipulate the dimensions of the frame of my video but it doesn't seem to get bigger or smaller proportionally to the control bar. What I mean is that it seems to be that the control bar of the video( the one with the play/pause and volume controls) is a lot wider than the actual video frame which looks quite awkward, so I would like to know how I could make the control bar and video frame equally wide. I think a couple of screen shots will offer a little more clarity to the problem I am having.
我为代码混乱表示歉意，但如果有帮助，我也将其包括在内。
My apologies for the messy code but I have included it if that helps.
<!DOCTYPE html>
<html style="height:100%; width=1200px;margin:0;padding:0;">
<body style="height:100%;width=100%;margin:0;padding:0;">
<div id="container" style="background-color:#FFA500;height:100%;width:100%;position:relative;min-height:800px;min-width:1000px;" >
<div id="logo_login_pass" style="border:1px solid black; height:25%;width:94%;background-color:white;position:relative;float:right;min-height:150px;min-width:700px;">
<div id="logo" style="border:1px solid black; height:80%; width:30%; background-color:green; position:absolute;bottom:14px;min-height:90px;min-width:340px;">
For Logo
</div>
<div id="login_pass_form" style="border:1px solid black; height:40%;width:50%;background-color:blue;min-height:60px; min-width:300px;position:relative;float:right;bottom:-30px;">
For Login and Password
</div>
</div>
<div id="video" style="border:0px solid white; height:40%;width:49.844%;background-color:indigo;position:relative;float:left;">
<video width="450px" height="190px" controls="controls" style="position:absolute;top:30px;right:170px;">
<source src="sampleVid.mp4" type="video/mp4">
<source src="sampleVid.ogv" type="video/ogv">
<source src="sampleVid.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div id="user_registration_form" style="border:0px solid white; height:74%;width:50%;background-color:purple;position:reltive;float:right;min-height:448px;">
Registration Form
</div>
<div id="footer" style="border:1px solid black; height:32%;width:100%;background-color:pink;position:relative;float:right;min-height:188px;">
Footer
</div>
</div>
</body>
</html>
任何帮助将不胜感激。
推荐答案
设置宽度尺寸并将高度尺寸留为空白将解决此问题。发生这种情况的原因是，如果您设置了两个尺寸，并且实际视频尺寸不相同，它将使用一个尺寸缩放到最接近的适当比例，从而在视频播放器的唯一一个尺寸上留有空白。视频可以在水平或垂直位置居中放置，左右两侧都留有空白
Setting up the dimension of the width and leaving the height dimension blank will fix this issue. It happens because If you set the two dimensions, and the actual video dimensions are not the same, it will scale to to the closest appropriate proportion using one dimension, thereby leaving blank margins at the only one dimension of the video player. The video may be centered either on the horizontal or on the vertical with blank space on either side
这篇关于控制栏比HTML5 + CSS中的视频宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
