html5视频作为页面背景

最新推荐文章于 2024-05-26 09:43:09 发布
最新推荐文章于 2024-05-26 09:43:09 发布
阅读量5.6w 收藏 99
点赞数 30
分类专栏： html5 文章标签： html5 视频背景

之前的代码因为chrome的升级，视频文件无法自动播放了。在这里更新一下源码，亲测可用。

复制代码并且替换视频文件即可。当然，比较懒得同学，扫码文末的二维码，关注公众号，在后台回复：小视频。即可获取源代码和附带的mp4视频文件哦。

<!DOCTYPE HTML>
<html>
<style>
 *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        } 
		p{
		    width: 100%;
			text-align: center;
			font-size: 40px;
			color: white;
		}
</style>
<body>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<p>大家好 </p>
<video autoplay loop muted>
  <source src="./movie.mp4" type="video/mp4"  />
Your browser does not support the video tag.
</video>

</body>
</html>

关注公众号获取更多内容，有问题也可在公众号提问哦：

 

强哥叨逼叨

叨逼叨编程、互联网的见解和新鲜事

 

强哥叨逼叨
关注
  • 30
    点赞
  • 踩
  • 99
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
专栏目录
向网页添加响应式全屏 HTML5 视频背景
我的博客，不一样的自我表达
05-29 562
CSS 提供了一种设置背景图片的方法，但目前不支持添加背景视频。不用担心，可以使用 HTML5 视频元素和一些简单的 CSS 轻松创建全屏背景视频。您会注意到这里使用了两种不同的视频文件，webm是网络视频的最佳格式，但目前并非所有浏览器都支持，因此使用辅助mp4文件作为后备。有许多免费的在线工具可用于将视频转换为网络所需的格式。让我们仔细看看使用的其他设置：poster– 图像在视频下载时可见，并且在不支持的设备上作为后备。autoplay– 视频加载后将自动开始播放。
关于html用视频做背景图（o(￣ヘ￣o＃)）
热门推荐
qq_44210563的博客
11-19 1万+
最近看b站出了个，双生世界的游戏，额，（晃b站发现的）， 然后好奇心打开官网，背景图怎么好像视频呢？ 检查一下，还真是， 最后自己做了一个，没什么逻辑，点击查看最终效果（也就是我的demo） 于是好奇，看了一下好像蛮简单的，于是乎 ，在失败了几次，反复看b站的代码，得到了经验 （其实就是在css上加点东西，把视频放在底层） video{ height: 100%; ...
Html5实现首页动态视频背景的示例代码
01-19
话不多说，先看效果图： ​ 炫酷吗？你想实现这种动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景； 首先网上找一段清晰的视频下载下来，最好是MP4格式的； 下载好了之后我们新建一个html文件来写代码： html代码： <video id=v1 autoplay loop muted> </video> 一个video标签包裹着，source代表来源文件，autoplay属性是自动播放，loop代表循环播放，muted代表
HTML+CSS实现视频背景页面
woloveself的博客
06-29 1816
【代码】HTML+CSS实现视频背景页面。
推荐开源项目：Vue-VideoBackground - 轻松创建视频背景的Vue组件
最新发布
gitblog_00043的博客
05-26 304
推荐开源项目：Vue-VideoBackground - 轻松创建视频背景的Vue组件 项目地址:https://gitcode.com/pespantelis/vue-videobg 1、项目介绍 Vue-VideoBackground 是一个优雅的Vue.js插件，用于在你的网页或应用中添加全屏视频背景，提升用户体验和视觉效果。它简单易用，能够无缝地集成到你的Vue项目中，让静态页面瞬间生动起...
HTML5实现动态视频背景
央顺科技官方博客
12-05 3826
HTML5实现动态视频背景 html代码 <video id="v1" autoplay loop muted > <source src="https://wallpaperm-mp4.duba.com/scene/preview_video/97ba6b60662ab4f31ef06cdf5a5f8e94_preview.mp4" /> </video> css代码 已经把整个页面铺平 *{ margin: 0
HTML5+CSS3 - 视频背景的实现
wendyGao_Yin的博客
03-02 1283
background实现视频背景 先上图，这个图片后i俺的灯塔是个视频背景 代码： 解析： <video class="bg-dideo" autoplay loop muted> <source src="video/lighthouse.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <!-- autoplay :自动播放 loop ：循
实现全屏的WebHTML5视频背景
08-10
全屏的Web HTML5视频背景，HTML5 Background Video
html5视频背景插件vidbacking
12-12
vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。
HTML5全屏背景视频jQuery插件
12-12
vidbg是一款基于HTML5的全屏背景视频jQuery插件。通过该jQuery插件可以在容器中插入视频，也可以将视频作为页面的全屏背景。该视频插件使用简单，兼容IE9以上的浏览器。
HTML5轻松实现全屏视频背景的示例
01-19
覆盖：视频作为网页背景后，我们可以任意在视频上层放置任意HTML内容。 视频封面：页面打开时，视频可能需要几秒钟才能加载完，那么我们可以设置一张图片作为视频的封面，等加载完再播放。 HTML 在你的页面body中...
HTML5 3D效果网页视频背景代码.zip
07-05
HTML5 3D效果网页视频背景代码是一款酷炫的3D网页视频背景特效下载。
html5背景视频插件vidbacking
06-01
一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。如果浏览器不支持HTML5视频，插件会自动将背景回退为指定的背景图片。
Vue登录主页动态背景短视频制作
10-16
首先，我们需要在HTML部分设置`<video>`标签来嵌入动态背景视频。注意到`<source>`标签用于指定不同格式的视频源，通常包括MP4和WebM格式，以确保在不同浏览器中的兼容性。`autoplay`属性使得视频在页面加载后自动...
html5 video标签制作背景图
ken_ding的博客
11-27 8335
代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
html5视频全屏背景插件（支持全屏背景，标签实现）
阿酷tony
01-23 4196
vidbacking是一款响应式的，跨平台的html5视频背景插件。该视频背景插件允许你在页面中的某个div后整个页面中使用HTML5视频作为背景。 使用简单，对于在元素内制作视频背景效果，你只需要将video标签放在元素内即可。 Vidbacking Demo of Ba
Html5将视频设置为背景并加上音频
weixin_45742613的博客
11-17 2289
Html5将视频设置为背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> vide
html视频自动全屏代码,HTML5轻松实现全屏视频背景的示例
weixin_30533933的博客
05-30 3380
想在你的网页首页中全屏播放一段视频吗？而这段视频是作为网页的背景，不影响网页内容的正常浏览。那么我告诉你有一款Javascript库正合你意，它就是Bideo.js。特性自动调整：Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸，当浏览器窗口调整时，它会自适应窗口尺寸，移动端、PC端都能自动调整，使视频作为背景并全屏展示。覆盖：视频作为网页背景后，我们可以任意在视频上层放置任意HTML...
怎么将视频作为html背景
06-13
可以使用CSS的background属性来实现将视频作为HTML背景。具体步骤如下： 1. 将视频转换为可用于Web的格式，如MP4、WebM或Ogg等。 2. 在HTML文档中，创建一个具有适当ID或类的元素来作为背景容器。例如，可以创建一个div元素作为背景容器。 ``` <div id="bg-video"></div> ``` 3. 在CSS文件中，使用background属性来设置背景样式，并将视频文件的路径作为背景图像。 ``` #bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: url(video.mp4) no-repeat center center fixed; background-size: cover; } ``` 其中，position属性设置为fixed，可以使背景固定不动。top和left属性设置为0，可以将背景元素放置在页面的左上角。width和height属性设置为100%，可以使背景元素占据整个页面的空间。z-index属性设置为-1，可以将背景元素放置在页面的最底层。background属性设置为视频文件的路径，利用no-repeat、center和fixed属性将背景图像居中固定。background-size属性设置为cover，可以使背景图像完全覆盖容器。 4. 最后，在HTML文件中将背景容器插入到body元素中。 ``` <body> <div id="bg-video"></div> <!-- 其他页面元素 --> </body> ``` 这样，视频就会作为HTML背景进行播放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 15
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值