javascript - 是否可以 "hide"图像后面的视频？

Question

本质上，在页面加载时，我希望将视频隐藏在图像后面(我想这可以通过定位 div 来完成)。

我希望当用户单击视频隐藏在后面的图像时视频开始播放。这应该可以通过一些 JavaScript/CSS 实现。

我真正要问的是有谁知道这方面的任何例子，或者是否可以使用一些 jQuery/Mootools 扩展...？我不想使用 Flash，因此它可以在 iPhone/iPad 上运行。

谢谢

Answer 1

这通常在嵌入 Quicktime 影片时完成。如果您能够设置其海报框架，则可以直接使用视频完成此操作。通常还通过将图像放置在屏幕上与视频相同的位置并在它们之间切换来完成。代码可能看起来像这样。

HTML

...

<embed id="video" style="display: none;">...<embed>

<img id="poster" onclick="switchToVideo()">

...

JS

function switchToVideo(){

document.getElementById('video').style.display = "block";

document.getElementById('poster').style.display = "none";

document.getElementById('video').Play();

}