javascript - 使 div 的大小和位置与视频的大小和位置相同

Question

我有一个宽度为 100% 高度为 100% 的 HTML5 视频，我想包装一个 div 以适合视频的大小和位置(不是视频标签，而是视频本身)使用任何必要的东西。

[See Fiddle]

HTML:

<div id="wrapper"></div>
<video id="vid" controls preload="none" width="100%" height="100%" poster="http://video-js.zencoder.com/oceans-clip.png">
    <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'/>
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
</video>

CSS:

#wrapper{
  width: 2px;
  height: 2px;
  border: solid 2px red;
  position: absolute;
}

JS(jQuery):

setInterval(function(){
    $("#vid").height($(window).height() - $("header").height() - 7);
    /*There is a header and a bunch of other stuff in the original code*/
}, 10);

这是我在这里的第一个问题，如果您有任何需要，我很乐意回答。谢谢。

编辑:我需要的是类似 this 的东西

Answer 1

使用视频的宽高比计算视频的高度和宽度似乎是必要的。您的 fiddle 在视频元素上放置了一个高度(设置为 264)，这与您问题的代码示例不同。哪个更适合您的问题？

话虽如此，假设视频宽度为横向(全窗口宽度)，也许类似这样的方法可以尝试计算包装器的适当高度和顶部 css 值:

JavaScript:

var vidRatio = $("#vid").height()/$("#vid").width();

setInterval(function(){
    $("#vid").height($(window).height() - $("header").height() - 7);
    var width = $(window).width()-20; // abitrary 20 pixels to account for border/margin/padding?
    $("#wrapper").css({
        'width': width, 
        'height':width*vidRatio,
        'top':($(window).height()-width*vidRatio)/2
    });
/*There is a header and a bunch of other stuff in the original code*/
}, 10);

CSS:

#wrapper
{
    width: 2px;
    height: 2px;
    border: solid 2px red;
    position:absolute;
}

http://jsfiddle.net/lsubirana/1Ly0f5cx/

它并不完美，但可能有所帮助。