Question

我想在我的网站上放置一个<video>作为横幅，但我不希望它最初完全可见。 Here's some concept work of what I'd like

在页面加载时，我希望它显示为这样，并显示重叠的播放按钮。

在.click()事件或onclick=""事件发生后，我希望视频能够展开，显示控件和播放。

这完全可以用<video>元素吗？

Answer 1

我建议一开始就没有视频。而是使用占位符图像。点击后，使用JS将其替换为实际视频。通过这种方式，您可以拥有一个很好的手动选择图像，并且只在需要时加载视频。

Answer 2

http://fiddle.jshell.net/s5A66/64/
http://fiddle.jshell.net/s5A66/64/show

注意：您还可以使用视频海报属性并添加自己的视频静止图像。你可能有一个模糊的图像，而不是视频播放时你可以删除它...在这里我将视频移出屏幕一点点，并在点击时点亮它。

var video = $("#video_32568");
$(".video-container").css({"top":-200});
$(".play-button").click(function() {
    $(this).css("visibility", "hidden");
    var video = $("#video_32568").get(0);
    $(".video-container").animate({top:0}, 800, function() {
    video.play();
    });
    return false;
}); 

video.bind("pause ended", function() {
    $(".play-button").css({"backgroundPosition": "center center", "visibility": "visible"});
});

section {
    position: relative;
    width: 640px;
}
.video-container {
    position: relative;
}
section .play-button {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: url(http://s17.postimg.org/g78bq59h7/button_black_play.png) center 209px no-repeat;
}
section video {
    width: 640px;
    height: auto;
    position: relative;
}
 <section>
   <div class="video-container">
    <div class="play-button"></div> 
      <video id="video_32568">
       <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
     </video>  
    </div>
  </section>

扩展视频横幅

2 个答案: