【问题标题】:Can you display HTML5 <video> as a full screen background?您可以将 HTML5 <video> 显示为全屏背景吗?
【发布时间】:2011-04-23 10:15:19
【问题描述】:

如何将 HTML5 &lt;video&gt; 显示为网站的全屏背景?类似于此 Flash 站点演示...

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

【问题讨论】:

  • stackoverflow.com/questions/1055214/…你可以在那里签到
  • 我已经看过那个帖子了,这似乎更关心在浏览器窗口外全屏播放视频,我正在寻找可调整大小的浏览器内视频。我认为这方面可能还有更多内容,尽管此链接看起来更有希望
  • 我不会将此作为答案发布,因为我只有经验证据,但在 Chrome 和 Firefox (Ubuntu 10.04) 中进行的测试表明这是不可能的。然而,我很着迷于被证明是错误的。 +1 并加注星标,以防万一。

标签: html5-video


【解决方案1】:

在视频上使用 position:fixed,将其设置为 100% 宽度/高度,并在其上放置一个负数 z-index,使其显示在所有内容的后面。

如果您查看VideoJS,控件只是位于视频顶部的 html 元素,使用 z-index 确保它们位于上方。

HTML

<video id="video_background" src="video.mp4" autoplay>

(添加webm和ogg源码支持更多浏览器)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

它适用于大多数 HTML5 浏览器,但可能不适用于 iPhone/iPad,因为需要激活视频,并且不喜欢上面的元素。

【讨论】:

    【解决方案2】:

    我可能有点迟回答这个问题,但这对寻找这个答案的新人很有用。

    上面的答案很好,但要获得完美的视频背景,您必须检查宽高比,因为在调整屏幕大小或在不同屏幕尺寸上使用时,视频可能会剪切或周围的画布变形。

    不久前我遇到了这个问题,我找到了使用媒体查询的解决方案。

    这是我写的关于如何创建Fullscreen Video Background with only CSS的教程

    我也会在这里添加代码:

    HTML:

    <div class="videoBgWrapper">
        <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
            <source src="videosfolder/video.webm" type="video/webm">
            <source src="videosfolder/video.mp4" type="video/mp4">
            <source src="videosfolder/video.ogv" type="video/ogg">
        </video>
    </div>
    

    CSS:

    .videoBgWrapper {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: -100;
    }
    .videoBg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    @media (min-aspect-ratio: 16/9) {
      .videoBg{
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
        width: auto;
        height: 100%;
      }
    }
    

    希望对你有用。

    【讨论】:

    • 这对我来说是一个很好的答案,我不知道人们会否决这个答案。投反对票的人你能解释一下为什么吗?
    【解决方案3】:

    对此发表评论 - 我已将 HTML5 视频用作全屏背景,效果很好 - 但请确保使用 Height:100% 和 width:auto 或其他方式 - 以确保您保持纵横比。

    至于 Ipad - 你可以(显然)做到这一点,通过隐藏然后强制点击事件触发,并让点击事件的功能启动 Load/Play()。

    Ps - 这不应该需要任何插件,并且可以用最少的 JS 来完成 - 如果你的目标是任何移动设备(我想你可能是......)远离任何这样的框架是前进的方向。

    【讨论】:

      猜你喜欢
      • 2015-05-11
      • 2016-02-14
      • 2012-07-19
      • 2014-03-02
      • 2014-04-06
      • 1970-01-01
      • 1970-01-01
      • 2013-08-02
      • 2014-02-08
      相关资源
      最近更新 更多