视频为网站背景？ HTML 5

问题描述：

我想使用视频作为背景，而不是自动延伸至整个屏幕（背景）的图像。视频为网站背景？ HTML 5

我也想旋转视频和图像..以便有任何顺序显示随机视频/图像。

也很高兴知道如何延迟视频播放，以便视频只在播放站点后的30秒内播放。

thx！

请考虑，许多访问者会讨厌这个功能（我主动阻止这与adblock）。此外，视频可能会在两种情况下伤害用户 - 在计量连接和在远程桌面会话中查看页面时，如果上传带宽较低，可能无法使用该页面。 – 2015-06-09 16:27:40

答

首先，你的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%; }

这将在您的页面上创建一个视频元素，立即开始播放第一个视频，然后迭代s通过由JavaScript变量定义的播放列表。你的CSS里程可能会因网站其他部分的CSS而异，但100％宽度/高度应该在基本页面上完成。

thx，但全屏代码不起作用。它只是在左上角显示原始大小的视频，并使网站上的其他文字消失！ – Roland 2010-10-22 19:13:04

那么，如果你想全屏，那么网站上的其他文字显然会消失。至于全屏不工作，请尝试将视频元素的高度和宽度设置为视口大小。例如'video.width = 1024; video.height = 768;' – 2010-10-26 17:13:20

请看下面的答案。它考虑到所有屏幕尺寸:) – sydlawrence 2011-03-15 04:07:48

答

我可能有视频为背景，延伸到浏览器的宽度或高度，溶液（但视频仍然会保持纵横比，不可能找到一个解决方案呢。）：

认沽该视频正好位于身体标记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里面所有的内容，并把正确的z指数在CSS这样的：

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

希望我能帮帮我。让我知道，当你可以找到一个解决方案，视频不会而不是保持高宽比，所以它可以填充整个浏览器窗口，所以我们不必把一个bgimage。

答

看看我的jQuery插件videoBG

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

进行任何HTML5视频网站的背景...有浏览器的图像回退不支持HTML5

真的很容易使用

让我知道你是否需要任何帮助。

谢谢Sydlawrence！我从一本HTML5书籍（Lawson和Sharp）开始，然后去了网络......到处搜索“视频背景html5”并阅读大量不太正确的信息。你的解决方案就像一个魅力。 – 2011-06-11 05:49:55

@sydlawrence很棒！我已经实施你的解决方案。整合后我有一个问题，那就是在视频加载之前海报会闪烁一秒 - 如何做到这一点，以便海报只在与html5视频不兼容时才加载？ – willdanceforfun 2012-06-19 23:41:08

嗨syd，你的插件工作得很好，但它似乎不工作在Firefox上？这怎么可能？在其他地方它的作品 – woony 2012-09-25 11:16:57

视频为网站背景？ HTML 5

相关推荐