不使用 Flash 的全屏视频背景

Posted 2023-05-07

【中文标题】不使用 Flash 的全屏视频背景

【英文标题】：full screen video background without using Flash

【发布时间】：2011-11-11 11:01:36

【问题描述】：

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

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

有什么想法吗？

非常感谢

【问题讨论】：

看到人们对“全屏”的实际含义感到困惑。你能澄清一下吗？你是指整个屏幕，还是整个文档？

【参考方案1】：

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

看看HTML5specification：

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

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

【参考方案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;

【参考方案3】：

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

【讨论】：

你到底在说什么？这如何解决 HTML 页面上的全屏视频背景问题？我不明白。

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

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

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

【讨论】：

你真的是说旧的浏览器不允许在纯 HTML 中这样做吗？因为事实上，有现代浏览器能够支持 HTML5 的

@scornork 全屏 <video> 不等于“网页的全屏视频背景”。

您可以像使用任何 标签一样在 CSS 中定位

@scornork 您的链接看起来很酷（我喜欢背景视频），但是在 Chrome 中访问该网站时，我看不到切换到全屏模式的按钮?我需要使用什么浏览器？

@scornork 视频中的小错字：Jarkata 而不是 Jakarta（可能并不重要而且为时已晚，但你知道我们程序员对细节有敏锐的洞察力 :)