javascript - 浏览器中如何实现squeezeback？

Question

我有兴趣在我的网页中的视频中添加挤压。

有没有一种简单的方法可以做到这一点，而无需在视频本身中实现它？

Answer 1

那将是重叠的绝对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
}

然后，要缩放视频，请查看这篇关于“缩放”元素并保留纵横比的帖子。

Answer 2

将视频放在带有 id 的 div 中。使用 jquery 更改视频元素的大小（可能使用 %s）。在视频元素（.appendElement()）之后添加一个元素到 div 用另一个东西填充它。

Answer 3

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

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

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