控制栏比html5 + css中的视频宽

Question

控制栏比html5 + css中的视频宽

ano*_*428 2 html html5 cross-browser html5-video

我尝试在html5中包含width和height属性来操纵我视频帧的尺寸,但它似乎没有与控制条成比例地变大或变小.我的意思是,似乎是视频的控制条(具有播放/暂停和音量控制的那个)比实际的视频帧宽得多,看起来很尴尬,所以我想知道我是怎么做的可以使控制栏和视频帧同样宽.我认为一些屏幕截图可以让我更清楚地解决我遇到的问题.

这是mozilla中视频的显示

这是以chrome显示的视频

我为凌乱的代码道歉,但如果有帮助,我已经把它包括在内.

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

Run Code Online (Sandbox Code Playgroud)

任何帮助将非常感激.

Answer 1

小智 9

设置宽度尺寸并将高度尺寸留空将解决此问题.之所以如此,是因为如果您设置了两个维度,并且实际视频维度不相同,则会使用一个维度缩放到最接近的适当比例,从而在视频播放器的唯一维度上留下空白边距.视频可以在水平或垂直方向上居中,两侧各有空白区域

归档时间：	13 年前
查看次数：	7278 次
最近记录：	6 年，7 月前