Question

我已经看到它已经完成但目前无法找到该网站。

我有一个带有播放按钮的英雄形象，当它被点击时，我想隐藏该div的内容，同时扩展它然后淡入视频。

我正在使用标签将视频嵌入到英雄副本中。

我可以做转换容器的CSS并使所有内容消失，但我对jquery来说太新手来设置它的脚本。

你可以看到我到目前为止所拥有的内容@ http://www.gigyastaging.com/

目前视频已叠加并自动播放，是否可以阻止预加载，只在点击播放按钮时加载视频？

Answer 1

首先，删除autoplay属性：

<video id="video_background" src="http://player.vimeo.com/external/84613377.hd.mp4?s=7820d9cd4d5b295c7f289492772afb90"></video>

接下来，隐藏用户的视频：

<video id="video_background" src="http://player.vimeo.com/external/84613377.hd.mp4?s=7820d9cd4d5b295c7f289492772afb90" style="display: none;"></video>

现在制作一些简单的js代码来监听点击，淡入视频，播放视频，最后在视频播放完毕后淡出。

$("video").on("ended", function(){
    $(this).fadeOut();
});

$("#hero-play").click(function(){
   var v = $("video");

   v.fadeIn();
   v.get(0).play();
});

您可能会注意到我如何使用v.get(0)。这是因为jQuery无法播放视频，您需要获取原始DOM元素，然后调用属于视频元素的play方法。

简单jsFiddle示例。

在展开容器和播放视频时隐藏DIV中的内容

1 个答案: