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();

}