Question

我有一个宽度为100％且高度为100％的HTML5视频，我想要包装div以适应视频的大小和位置（不是视频标签，而是视频本身）任何必要的事情。

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

使用视频的宽高比计算视频的高度和宽度似乎是必要的。你的小提琴在视频元素上设置了一个高度（设置为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/

这不完美但可能会有所帮助。

Answer 2

试试这个

＆＃13;

#wrapper
{
    width:`100%;
    height:100%;
    display:block;
    border: solid 2px red;
}
#wrapper #vid{ display:inline-block}

＆＃13;

<div id="wrapper">
<video id="vid" controls preload="none" width="100%" height="264"
      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>
    </div>

＆＃13;

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

2 个答案: