如何在浏览器中实现squeezeback？

Question

我有兴趣将squeezeback添加到我的网页中的视频中。

有没有一种简单的方法可以在视频内部实现它？

Answer 1

将视频放入带有ID的div中。 使用jquery更改视频元素的大小（可能使用％s）。 在视频元素（.appendElement（））之后向div添加元素 填写另一件事。

Answer 2

<video>是一个HTML元素，就像任何其他元素一样，所以你可以使用CSS和javascript来调整它的大小，将其他元素放在它周围等等。

我可能会将视频放在相对定位的div中。在适当的时候，使用一些脚本相应地缩放视频，然后引入绝对位于其上方/下方/旁边的更多元素。这个世界就是你的牡蛎，试一试然后回报！

考虑到这一点，Mozilla的Popcorn.js可能会对此类事情有所帮助。

Answer 3

那将是重叠的绝对div：

<div id="container">
    <div id="background">contents here</div>
    <div id="videoWrapper">
        <video></video>
    </div>
</div>

#container{
    position:relative;
}

#container > *{
    position:absolute; /*to allow stacking*/
    top: 0;            /*stretch to container*/
    bottom:0;
    left: 0;
    right: 0
}

然后，要缩放视频，请查看有关“缩放”元素的this post并保留宽高比。