专业编程基础技术教程

网站首页 > 基础教程 正文

使用视频作为网页背景技术(html视频作为背景)

ccvgpt 2024-07-29 13:11:10 基础教程 12 ℃

大家好,我是吉礻羊。

不知道大家有没有在浏览网页的时候会看到动态的网站背景一看就是高大上,用审查工具一看,靠背景居然是视频,mp4格式的。

使用视频作为网页背景技术(html视频作为背景)

今天就来说一下如何把背景做为网页的背景的技术

作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音

背景视频应该有个替代图片,当浏览器不支持这种HTML技术、视频格式时用图片替代

建议视频的长度应该是12-45秒之间

考虑到视频加载需要时间,视频的体积应该很小,尽量的压缩

实例:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>使用视频作为网页背景</title>

<style type="text/css">

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;

}

</style>

</head>

<body>

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

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

</video>

</body>

</html>

Tags:

最近发表
标签列表