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

}

Answer 2

正如您所描述的（我不知道确切的语法），只需将具有更高z级别的图像放在要隐藏的任何内容上，并在JavaScript中处理onClick方法。

Answer 3

要使堆叠与视频一起使用，您需要将wmode变量添加到object / embed。此外，要堆叠，您需要在要放置在另一个上面的元素上使用position：absolute。将它们包含在相对容器中，并使z-index更高于需要更高的那个。

以下是向视频添加wmode的示例：

<object width="400" height="300">
    <param name="movie" value="" />
    <param name="wmode" value="transparent">
    <!--[if !IE]>-->
    <embed src="" width="400" height="300" wmode="transparent" menu="false">
    <!--<![endif]-->
</object>

是否可以“隐藏”图像背后的视频？

3 个答案: