Как изменить размер видео с помощью элемента html5?

Question

Как изменить размер видео с помощью элемента html5?

0

Я пытаюсь показать видео в полноэкранном режиме. Я использую элемент html5 и код ниже.

код javascript

$('document').ready(function()
       {

             var o_vid_width=$('#vid1').width();
              var o_vid_height=$('#vid1').height();
              alert(o_vid_width);// output 300px

           var height = $(window).height();
           var width = $(window).width();
            alert(width)// //output 1280

             if(o_vid_width<=width){

                o_vid_width=width ;
                  alert(o_vid_height)// out put 150 px
             }
});

Код HTML

<video id="vid1" autoplay loop >

  <source src="viedos/viedo.mp4" type="video/mp4" >

  <source src="viedos/viedo.ogg" type="video/ogg" >
  Your browser does not support the video tag.
</video>

В приведенном выше коде я пытаюсь переназначить значение ширины окна для o_vid_width, оно должно быть 1280px; но это дает мне 150. Я не знаю, почему это странно?

//Я попытался использовать код ниже, даже если он показывает поля с обеих сторон. Я хочу, чтобы он охватывал все окно, и когда я уменьшаю размер, даже если он будет отображаться на всех окнах без полей. var min_w = 300; //минимальная ширина видео разрешена var vid_w_orig; // исходные размеры видео var vid_h_orig;

jQuery (function() {//запускается после загрузки DOM

vid_w_orig = parseInt(jQuery('video').attr('width'));
vid_h_orig = parseInt(jQuery('video').attr('height'));


jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger('resize');

});

функция resizeToCover() {

// set the video viewport to the window size
jQuery('#vid1').width(jQuery(window).width());
jQuery('#vid1').height(jQuery(window).height());

// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;

// don't allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

// now scale the video
jQuery('video').width(scale * vid_w_orig);
jQuery('video').height(scale * vid_h_orig);

}

user186730 16 дек. 2013, в 08:37

Источник

0

но вы предупреждаете значение o_vid_height ???
Outlooker 16 дек. 2013, в 07:32
0

Дубликат: stackoverflow.com/questions/1055214/…
shakthydoss 16 дек. 2013, в 07:32
0

Вы изменяете значения только переменных. Они держат снимок размера видео. Если вы измените переменные, это не повлияет на видео.
Sebastian 16 дек. 2013, в 07:37

Показать ещё 1 комментарий

Теги:

javascript

jquery

html5

2 ответа

Ещё вопросы

но вы предупреждаете значение o_vid_height ???
Вы изменяете значения только переменных. Они держат снимок размера видео. Если вы измените переменные, это не повлияет на видео.

shakthydoss · Answer 1 · 2013-12-16T05-39-00.000Z

Полноэкранное видео HTML5

<!doctype html>
<html lang="en">
<head>
    <style type="text/css">
        video{
             margin: 0 auto; padding: 0;
        }
        body{
            background-color:black;
        }
    </style>
</head>
<body>

<video id="myvideo"  controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $( document ).ready(function() {
            var w =  ($(window).width()) -20;
            var h = ($(window).height()) -30;

            $("#myvideo").height(h);
            $("#myvideo").width(w);
        });
        $(window).resize(function() {
            var w =  ($(window).width()) -20;
            var h = ($(window).height()) -30;

            $("#myvideo").height(h);
            $("#myvideo").width(w);
        });

    </script>

</body>
</html>

Нет, он не работает точно так, как я хочу, он оставляет поле слева и справа, а когда я уменьшаю размер окон, он показывает аргин только слева.
Вы должны установить ширину и высоту при изменении размера события Windows $ (window) .resize (function () {});
он по-прежнему показывает поля ... не на весь экран
простой взлом изменить цвет фона на черный, чтобы сделать его как полноэкранный

hamburger · Answer 2 · 2014-02-20T13-12-00.000Z

если у вас есть размер видео, сделайте это так:

var d = $(window),
    e = $(".secao"),
    f = e.children("div.video"),
    b, c,  j = 1920, k = 1200,
    l = d.width(),
    winH = d.height(),
    winH = winH > 600 ? winH : 600,
    c = Math.max(l / j, winH / k),
    b = Math.round(k * c) + "px";

         f.children("video").css({
            height: b
        })
 });

и скрыть переполнение.

div#intro.secao {
    background-color: #000000;
    height: 100%;
    overflow: hidden;
    position: relative;
}