如何创建视频叠加层？ [关闭]答案

【问题标题】：How can i create a video overlay? [closed]如何创建视频叠加层？ [关闭]
【发布时间】：2013-02-12 12:01:57
【问题描述】：

您好，我看过一些这样做的博客，但我想知道他们是如何做到的，我不知道具体要查找什么。

查看此链接http://concreteloop.com/2013/02/video-nicki-minaj-french-montanas-freaks-behind-the-scenes

请注意，它们有一个图像和一个播放按钮，一旦您单击播放按钮，图像就会消失并且视频会播放。我想知道是否有人知道我可以在哪里学习创建此功能。

【问题讨论】：

我怀疑你会通过链接到 nicki minaj 视频来获得很多帮助。为什么不能查看页面源代码，看看发生了什么？或者问一个真正的问题。
在 chrome 上浏览时右键单击页面，然后单击检查元素！瞧……
@jzworkman 没必要这么粗鲁

标签： java php javascript html overlay

【解决方案1】：

我会做的最愚蠢的方法是拥有一个图像文件和一个链接到它的 js 函数，基本上在点击时隐藏图像并显示一个包含视频的 div 块。虽然你确实需要学习使用 firebug 或 web inspector。

【讨论】：

【解决方案2】：

这是您要实现的目标的简单示例。最初隐藏视频，然后在用户单击图像时显示和播放。

<div id="container">
    <img src="http://content.internetvideoarchive.com/content/photos/7142/29998006_.jpg" />
    <video width="320" height="240" controls style="display: none;">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(function () {
        $('img').click(function () {
            $(this).hide();
            $('video').show()
            $('video')[0].play();
        });
    });
</script>

【讨论】：