当前位置：文江博客话题详情

不使用Flash的全屏视频背景

发布于 2024-12-03 08:20:42 字数 110 浏览 1 评论 0原文

有没有办法不使用Flash而为网页设置全屏视频背景？

我正在考虑 html5，但我不能将 Internet Explorer 排除在外。

有什么想法吗？

多谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆追雨的时光 2024-12-10 08:20:43

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

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

回复收藏 0 原文

下壹個目標 2024-12-10 08:20:43

看来你可以。请参阅此问题。并查看 VideoBG jQuery 插件。相当滞后，并且浏览器支持不是很好，但它确实有效:)

回复收藏 0 原文

就此别过 2024-12-10 08:20:43

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

如果您的意思是真正全屏 - 占据整个，物理屏幕 - 不。没有现代浏览器允许在纯 HTML 中执行此操作。

回复收藏 0 原文

最单纯的乌龟 2024-12-10 08:20:42

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

查看 HTML5 规范：

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

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

回复收藏 0 原文

掩饰不了的爱 2024-12-10 08:20:42

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

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

因此，假设您想为全屏背景视频使用“HTML5 的 + Flash Fallback”方法，您可能会执行以下操作：

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;
}

I think that you need to first establish why you are not keen on using Flash. If the reason is that you want to target mobile devices, then using HTML5's <video> in combination with a Flash player fall back is definitely viable.

Unfortunately HTML5 is not fully supported in every browser - especially IE. This is probably why you will still need to use Flash at some point.

So assuming that you would like to give the "HTML5's <video> + Flash fallback" method a shot for your full screen background video, here's what you could probably do:

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>

And then you style it like this for a full screen effect and proportional cropping/stretching:

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

回复收藏 0 原文