如何使用html5元素调整视频大小？

我试图在全屏显示视频。我使用html5元素，代码如下。如何使用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的（函数（）{// 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);

}

来源

2013-12-16 user186730

但是您正在提醒o_vid_height的值？ – Outlooker

Duplicate：http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen – shakthydoss

你只改变变量的值。他们掌握了视频大小的快照。如果更改变量，这不会影响视频。 – Sebastian

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>

来源

2013-12-16 07:43:12 shakthydoss

不准确的工作方式，我想要的，它留下了边缘在左侧和右侧，当我减少窗口的大小，它只显示精灵左侧。 – user186730

你必须设置Windows事件$（window）.resize（function（）{}）调整大小的宽度和高度; – shakthydoss

怎么样它的边际显示 – user186730

如果你有视频的大小，像这样做：

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; 
}

来源

2014-02-20 15:20:21 hamburger

如何使用html5元素调整视频大小？

回答

相关问题