logo标签列表

视频作为网站背景？HTML 5

videohtmlbackgroundhtml5-video
57
我想使用视频作为背景，取代自动拉伸到整个屏幕（背景）的图像。
我还想旋转视频和图像...以便随机显示任何顺序的视频/图像。
同时，了解如何延迟视频播放，使得在网站加载30秒后才播放视频会更好。
谢谢！
3
请考虑到许多访问者会对此功能感到厌烦（我主动使用广告拦截器屏蔽此功能）。此外，视频可能会在两种情况下对用户造成伤害--在计量连接上和在远程桌面会话中查看页面时，如果上传带宽较低，则可能变得无法使用。 - Igor Levicki
4个回答
36

看一下我的jQuery视频背景插件

http://syddev.com/jquery.videoBG/

使任何HTML5视频成为网站背景... 对于不支持html5的浏览器，具有图像回退功能。

非常易于使用

如果您需要任何帮助，请告诉我。

1
谢谢Sydlawrence！我开始看HTML5书（Lawson和Sharp），然后去了网络...在各处搜索“video background html5”，并阅读了许多不太正确的信息。你的解决方案非常有效。 - user793721
@sydlawrence，太棒了！我已经实现了你的解决方案。不过我在集成时遇到了一个问题，就是视频加载前海报会闪现一下 - 有什么办法可以做到只有在 HTML5 视频不兼容时才加载海报吗？ - willdanceforfun
嗨Syd，你的插件很棒，但是在Firefox上似乎无法工作？这怎么可能？在其他地方它都能正常工作。 - woony
嘿，@sydlawrence！如何设置默认静音？感谢您提前的帮助。 - Parik Tiwari
26

首先，您的HTML标记看起来像这样：

<video id="awesome_video" src="first_video.mp4" autoplay />

其次，你的JavaScript代码将如下所示：

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

最后但同样重要的是，你的 CSS：

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

这将在您的页面上创建一个视频元素，立即开始播放第一个视频，然后通过JavaScript变量定义的播放列表进行迭代。CSS方面的效果可能会因为网站其余部分的CSS而有所不同，但是在基本页面上，100％宽度/高度应该可以实现。

谢谢，但全屏代码并没有真正起作用。它只是在左上角显示视频的原始大小，并使网站上的其他文本消失！ - Roland
如果您想要全屏，那么网站上其余的文本显然会消失。至于全屏不起作用的问题，请尝试将视频元素的高度和宽度设置为视口大小。例如，video.width = 1024; video.height = 768; - Jey Balachandran
看一下我下面的答案。它考虑了所有屏幕尺寸 :) - sydlawrence
8

我可能有一个关于将视频作为背景的解决方案，可以将其拉伸到浏览器的宽度或高度（但视频仍将保留纵横比，尚未找到解决方案）：

在body标签后面放置视频，并加上style="width:100%;"。紧接着，在bodydummy标签之后：

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

把所有内容放在 bodydummy div里，并在CSS中正确设置z-index，像这样：
#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

希望我能帮到您。请告诉我，当您找到一个解决方案时，视频不会保持纵横比，以便它可以填满整个浏览器窗口，这样我们就不必放置背景图像。

0

Tailwind CSS（在React.js/JSX上）

如果您正在使用Tailwind CSS，则必须将宽度和高度设置为屏幕大小，然后将对象适配设置为覆盖：

<video autoPlay muted loop id="myVideo" src="/video_bg.mp4" itemType="video/mp4" className='w-screen h-screen object-cover'>

纯CSS

... 或者你可以将这个CSS应用到你的视频元素上：

#myVideo {
   width: 100vw;
   height: 100vw;
   object-fit: cover;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接