<video>标签：以视频为背景的网页

最新推荐文章于 2021-10-25 20:21:01 发布

weixin_34258782

最新推荐文章于 2021-10-25 20:21:01 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sikou/blog/485402

本文探讨了<video>标签在不同浏览器中的兼容性问题，并提供了使用WebM和MP4格式确保广泛支持的方法。此外，还介绍了如何通过CSS实现背景视频的全屏效果，以及使用KMPLAYER进行视频效果调整的技术。

为什么80%的码农都做不了架构师？>>>

<video>标签

<video autoplay loop poster="polina.jpg" id="bgvid">

  <source src="video/1.webm" type="video/webm">

  <source src="video/1.mp4" type="video/mp4">

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

CSS拓展到全屏

 video {
        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;
    }