java - 如何创建视频叠加层？

Question

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

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

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

Answer 1

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

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

Answer 2

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