不使用 Flash 的全屏视频背景

Question

有没有什么方法可以在不使用 Flash 的情况下为网页设置全屏视频背景？

我正在考虑使用 html5，但我不能放弃 Internet Explorer。

有什么想法吗？

非常感谢

Answer 1

如果不使用 Internet Explorer 安装其他附加组件或对象，这是不可能的。 HTML5 允许在您的网站中嵌入视频，但并非所有浏览器都提供全屏支持。也许是用Google's Chrome Frame 一个想法。

看看HTML5specification：

用户代理可以允许用户以更适合用户的方式查看视频内容（例如全屏或在独立可调整大小的窗口中）。至于其他用户界面功能，启用此功能的控件不应干扰页面的正常呈现，除非用户代理公开用户界面。然而，在这样一个独立的上下文中，用户代理可以使完整的用户界面可见，例如播放、暂停、搜索和音量控制，即使控件属性不存在。

也可以embed Microsoft 的 Windows Media Player，但不能在后台运行...这里是一个工作示例：http://www.html5-fullscreen-video.com/

Answer 2

我认为您需要首先确定您不热衷于使用 Flash 的原因。如果原因是您想定位移动设备，那么将 HTML5 的<video> 与 Flash 播放器结合使用绝对是可行的。

不幸的是，并非所有浏览器都完全支持 HTML5，尤其是 IE。这可能就是您在某些时候仍需要使用 Flash 的原因。

因此，假设您想为您的全屏背景视频提供“HTML5 的 <video> + Flash 后备”方法，您可以执行以下操作：

HTML：

<video id="bg-vid" autoplay controls>
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source src="video.mp4" />
  <object id="flash-vid" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf"> 
    <param name="movie" value="flowplayer-3.2.1.swf" /> 
    <param name="allowfullscreen" value="true" /> 
    <param name="flashvars" value='config={"clip": {"url": "http://yoursite.com/videos/video.mp4", "autoPlay":true}}' /> 
  </object>
</video>

然后您将其设置为这样的样式以获得全屏效果和按比例裁剪/拉伸：

#bg-vid, #flash-vid{
   min-height: 100%;
   min-width: 1024px;
   width: 100%;
   height: auto;
   position: fixed;
   top: 0;
   left: 0;
   z-index: -1;
}

Answer 3

如果它只是一个简短的动画/视频，你可以制作一个精灵动画，但我很确定性能不会令人满意。更不用说图片大小了

Answer 4

如果你需要支持IE 8及更早版本，又想避免Flash，那么你可以在Silverlight中构建一个视频播放器，关于HTML5，正如其他人所说，它不允许全屏播放，最好提供全窗口播放。

希望对您有所帮助，但我想如果您想避免使用 Flash，那么您实际上就是在避免使用插件。

Answer 5

看来你可以。见this question。并查看VideoBG jQuery 插件。相当滞后，也不是很好的浏览器支持，但它确实有效:)

Answer 6

有没有什么方法可以在不使用 Flash 的情况下为网页设置全屏视频背景？

如果你的意思是 true 全屏 - 占据整个，物理屏幕 - 不。没有现代浏览器允许在纯 HTML 中这样做。