如何用视频做网页的背景

2021年1 月30日 / 龙哥随笔 / 没有评论 / 3,182次

偶然看到腾讯微云登录页面网站，发觉背景竟然是视频。只能感觉惊异。但是原来用的是层实现的，我拷贝了下代码，发现不完美，特别是手机显示的时候。搜集好多资料，终于也弄好了，下面把经验介绍给大家。

在网页加入代码：

<video autoplay loop muted poster="bg.jpg" id="bgvid"> 
<source src="polina.webm" type="video/webm">  
<source src="polina.mp4" type="video/mp4"></video>

这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。

我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。

在css里添加：

body {
    margin: 0;
    padding: 0;
    outline: 0;
}
video#bgvid { 
  position: fixed; right: 0; bottom: 0; 
  min-width: 100%; min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -100; 
  background: url(polina.jpg) no-repeat; 
  background-size: cover; }

一些老式的浏览器无法播放这种格式的视频，但它们仍然识别<video>标记(除了IE8/6)。对于这些浏览器，我们使用了background-image来弥补它们的不支持，使用的图片就是视频的封面图片。

时间：2021年1 月30日，星期六，下午8:20。
通过 RSS 2.0 订阅源关注。

龙哥 (Long.Ge)

如何用视频做网页的背景

提交评论