Question

您好我已经看过一些博客可以做到这一点，但我想知道他们是如何完成这项工作的，我不知道究竟该怎么看这个。

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

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

Answer 1

我最喜欢的方式，就是有一个图像文件和一个链接到它的js函数，基本上隐藏了点击图像并显示包含视频的div块。虽然你真的需要学习使用萤火虫或网络检查员。

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

如何创建视频叠加层？

2 个答案: