全屏视频简介HTML5？

好，所以我需要有一个视频加载全屏作为网站的介绍。我可以在HTML5中做到这一点，还是需要使用Flash？全屏视频简介HTML5？

有人可以请解释或指向我如何做到这一点的好资源。

我需要网站加载和5秒剪辑播放通过没有播放器控制或任何东西，然后直接进入主网站。

正是这样的例子：http://www.firecrackerfilms.com/

谢谢:)

来源

2012-04-30 BrettGolding

你不想全屏，你只是想填补整个客户区，根据您的示例网站。 – Brad

该视频*既不是全屏，也不是全视口*。 – msanford

这里是关于HTML5的一个很好的线程VS Flash视频和利弊： HTML 5 <video> tag vs Flash video. What are the pros and cons?

个人而言，我更喜欢HTML5，因为你可以在iPhone或iPad等几乎所有设备上观看视频等）。

但是html5并没有flash视频那么强大。

您还应该考虑到有些用户在浏览器中禁用了javascript或flash配置。

来源

2012-04-30 19:04:29 MUG4N

我不认为真正的全屏可能与用户请求它。至少在闪光灯中是不可能的。

如果你的意思是要填充整个视口，那么可以通过使用css来设置视频元素的大小来完成视觉元素的大小，如果你将宽度和高度设置为与视频的宽高比不匹配，视频不会被拉伸以填充框。相反，视频保留了正确的宽高比，并在视频元素中使用了letterbox。视频将在视频元素内尽可能大地呈现，同时保留宽高比。

来源

2012-04-30 19:05:49 drogadon

如果您需要设置一个背景视频试试这个

使用position:fixed上的视频，将其设置为100％width/height，并在其上添加一个负z-index所以会出现的一切背后。

如果你看VideoJS，控件只是html元素。

HTML

<video id="background" src="video.mp4" autoplay>

CSS

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
}

来源

2012-04-30 19:06:54 coder

+1正如我已经做了几次，但问题是，当你迫使它适应视口时，你会失去视频的宽高比。我提出的解决方案保留了方面，但有些视频丢失的警告。根据我的经验，这两种解决方案都可以接受，这取决于您的视频内容。 – msanford

是的，我同意我们放宽视频的宽高比。 – coder

只是为了完整而提及:) – msanford

在你的榜样的页面是不是全屏，也不是它甚至全视，it's a small video黑色背景，融合成该页面的黑色背景。 如果你能做到这一点，这将工作。

如果你关心在iPad上，你会never be able to auto-play an HTML5 video介绍，因为iOS的抑制autoload和autoplay，除非它们被用手指触摸屏幕触发。但是再一次，它无法播放Flash。

如果您希望HTML5视频成为全视口，例如在4：3显示器中观看16：9视频，则会使视频变成全高并丢失视频的边缘。对于相反的情况也是如此。这将保持视频的宽高比，但需要注意的是，您将视频内容的一部分遗失给了隐藏溢出。按照@coder的建议，如果你不关心宽高比，你可以制作视频height: 100%和。

由于这个原因，在您的示例网站上使用它们可能会更容易，并使视频融入背景。

来源

2012-04-30 19:15:36 msanford

全屏视频简介HTML5？

回答

相关问题