评论

收藏

用视频做网页的背景

avatar admin | 806 人阅读 | 0 人评论 | 2021-03-14

在网页加入代码:

[pre]<video autoplay loop muted poster="bg.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">  
<source src="polina.mp4" type="video/mp4"></video>
[/pre]
这里摆放视频格式的顺序很重要,因为有些版本的谷歌浏览器里,如果.webm格式的视频放在了其他视频后面,视频将无法播放。

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

在css里添加:

[pre]
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; }

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







""
还没有人打赏,支持一下
您需要登录后才可以回帖 登录 | 注册 微信登录

EA之家评论守则