Question

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

我正在考虑使用html5，但我无法将Internet Explorer退出。

有什么想法吗？

非常感谢

Answer 1

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

查看HTML5 specification：

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

也可以embed微软的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

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

如果您的意思是 true 全屏 - 占用整个，物理屏幕 - 禁止。没有现代浏览器允许纯HTML。

Answer 4

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

Answer 5

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

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

Answer 6

似乎你可以。见this question。并查看VideoBG jQuery插件。相当滞后，而不是很好的浏览器支持，但它确实有效：）

不使用Flash的全屏视频背景

6 个答案: