gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:55:13 25 4
gpt4 key购买 nike

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

This is the display of the video in mozilla

This is the display of the video in 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>

如有任何帮助,我们将不胜感激。

最佳答案

设置宽度尺寸并将高度尺寸留空将解决此问题。发生这种情况是因为如果您设置了两个维度,并且实际视频维度不相同,它将使用一个维度缩放到最接近的适当比例,从而在视频播放器的唯一一个维度留下空白边距。视频可以水平居中或垂直居中,两边留有空白

关于html - html5 + css 中的控制栏比视频宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13335228/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com