Панель управления шире, чем видео в html5 + css

Я попытался включить атрибуты ширины и высоты в html5, чтобы управлять размерами кадра моего видео, но, похоже, он не становится больше или меньше пропорционально панели управления. Я имею в виду, что кажется, что панель управления видео (та, что с регуляторами воспроизведения / паузы и громкости) намного шире, чем фактический видеокадр, который выглядит довольно неловко, поэтому я хотел бы знать, как я можно сделать панель управления и видеокадр одинаковой ширины. Я думаю, что пара снимков экрана прояснит проблему, с которой я столкнулся.

Это отображение видео в Mozilla

Это отображение видео в хроме

Мои извинения за беспорядочный код, но я включил его, если это поможет.

<!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-video cross-browser
person anonuser0428    schedule 11.11.2012    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Настройка размера ширины и оставление размера высоты пустым решит эту проблему. Это происходит потому, что если вы установите два размера, а фактические размеры видео не совпадают, оно будет масштабироваться до ближайшей подходящей пропорции с использованием одного измерения, тем самым оставляя пустые поля только в одном измерении видеопроигрывателя. Видео может быть центрировано либо по горизонтали, либо по вертикали с пустым пространством по обеим сторонам.

person sem fronteiras    schedule 13.05.2014
comment
пожалуйста, напишите для этого для правильного объяснения - person SagarPPanchal; 13.05.2014
comment
попробовал это, но при увеличении или уменьшении масштаба страницы размер видео соответственно не влияет - person zeeshan mughal; 28.10.2014

arrow_upward
0
arrow_downward

Это ваша проблема с видео, так как ваше видео не полноэкранное. См. следующий пример

 <!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"  controls="controls" style="position:absolute;top:30px;right:170px;">
              <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
              <source src="http://video-js.zencoder.com/oceans-clip.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>
person admoghal    schedule 12.11.2012

arrow_upward
0
arrow_downward

просто добавьте размер элемента в видео для тамнхо, которое вы хотите

<video width="450" height="240" controls>
person Paulo Lima    schedule 13.12.2013
comment
но видео могут иметь разную высоту в прекращении подачи видео - person scarto; 12.08.2018