当前位置：文江博客话题详情

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

发布于 2024-09-13 11:58:42 字数 222 浏览 6 评论 0原文

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

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

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

番薯 2024-09-20 11:58:42

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

HTML

...

function switchToVideo(){

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

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

document.getElementById('video').播放（）；

}

回复收藏 0 原文

枕花眠 2024-09-20 11:58:42

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

回复收藏 0 原文

故事与诗 2024-09-20 11:58:42

为了使堆栈能够处理视频，您需要将 wmode 变量添加到对象/嵌入中。另外，要堆叠，您需要在要放置在另一个元素之上的元素上使用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>

In order for stacking to work with videos you will need to add the wmode variable to the object/embed. Also, to stack you will need to use position: absolute on the element that you want to place on top of the other. Contain them both in a relative container and make the z-index higher on the one that needs to go above.

Here is an example of adding wmode to the video:

<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>

回复收藏 0 原文

~没有更多了~