javascript 全屏视频介绍 HTML5？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10389013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full Screen Video Intro HTML5?
提问by BrettGolding
Ok so I need to have a video load full screen as an intro to a website. Can I do this in HTML5 or do I need to use flash?
好的，所以我需要全屏加载视频作为网站的介绍。我可以在 HTML5 中执行此操作还是需要使用 Flash？
Can someone please explain or point me to some good resources on how to do this.
有人可以解释或指出一些关于如何做到这一点的好资源。
I need to website to load and the 5 second clip to play through with no player controls or anything and then go straight through to the main site.
我需要加载网站并播放 5 秒剪辑，没有播放器控件或任何东西，然后直接进入主站点。
Exactly like this example: http://www.firecrackerfilms.com/
就像这个例子：http: //www.firecrackerfilms.com/
Thanks :)
谢谢 ：）
回答by coder
If you need to set a background video try this
如果你需要设置背景视频试试这个
Use position:fixedon the video, set it to 100%width/height, and add a negative z-indexon it so it appears behind everything.
position:fixed在视频上使用，将其设置为100%width/height，并在其z-index上添加一个负片，使其出现在所有内容的后面。
If you look at VideoJS, the controls are just html elements.
如果您查看VideoJS，则控件只是 html 元素。
HTML
HTML
<video id="background" src="video.mp4" autoplay>
CSS
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
回答by msanford
The page in your example isn't full-screen, nor is it even full-viewport, it's a small videowith a black background that blends into the page's black background. If you can get away with doing that, that will work.
您示例中的页面不是全屏的，甚至也不是 full-viewport，它是一个黑色背景的小视频，与页面的黑色背景融为一体。如果你能做到这一点，那就行了。
If you care, you will never be able to auto-play an HTML5 videointro on iPad, because iOS inhibits autoloadand autoplayunless they are triggered by a finger touching the screen. But then again, it can't play Flash anyway.
如果您在意，您将永远无法在 iPad 上自动播放 HTML5 视频介绍，因为 iOS 禁止autoload并且autoplay除非它们被手指触摸屏幕触发。但话又说回来，它无论如何都不能播放 Flash。
If you want an HTML5 video to be full-viewport, for, say, a 16:9 video viewed in a 4:3 monitor, you will make the video full-height and lose the sides of the video. Similarly for the reverse case. This will maintain the video's aspect ratio with the caveat that you lose part of the video content to hidden overflow.
如果您希望 HTML5 视频为全视口，例如在 4:3 显示器中观看的 16:9 视频，您将使视频全高并丢失视频的边。反之亦然。这将保持视频的纵横比，但需要注意的是，您会因隐藏溢出而丢失部分视频内容。
If you don't care about aspect ratio, you can make the video height: 100%and width: 100%, as @coder suggests.
如果您不关心纵横比，则可以按照@coder 的建议制作视频height: 100%和width: 100%。
For this reason, it's probably easier to go with what they did on your example site, and make the video blend into the background.
出于这个原因，使用他们在您的示例网站上所做的事情可能更容易，并使视频融入背景中。
回答by MUG4N
Here is a nice thread about html5 vs flash video and the pros and cons: HTML 5 <video> tag vs Flash video. What are the pros and cons?
这是一个关于 html5 与 Flash 视频及其优缺点的好主题： HTML 5 <video> 标签与 Flash 视频。优缺点都有什么？
Personally I would prefer html5 because you can watch videos on almost every device type like iphone or ipad and so on).
就我个人而言，我更喜欢 html5，因为您可以在几乎所有设备类型（如 iphone 或 ipad 等）上观看视频）。
But html5 is not as powerful as flash videos.
但是html5没有flash视频那么强大。
You should also consider that some users have disabled javascript or flash configuration in their browser.
您还应该考虑到一些用户在他们的浏览器中禁用了 javascript 或 flash 配置。
回答by drogadon
I don't think real fullscreen is possible with a user requesting it. At least in flash it's not possible.
我认为用户请求它不可能实现真正的全屏。至少在闪存中这是不可能的。
If you mean to fill the whole viewport then it can be done by using css to size the video element with the caveat that if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.
如果您想填充整个视口，则可以通过使用 css 调整视频元素的大小来完成，但需要注意的是，如果您将宽度和高度设置为与视频的纵横比不匹配的内容，则视频不会被拉伸填满盒子。相反，视频保留了正确的纵横比，并在视频元素内以信箱形式显示。视频将在视频元素内尽可能大地呈现，同时保持纵横比。
