html 实现动态视频背景
406 字
2 分钟
html 实现动态视频背景
前言
最近迷上了动态视频背景, wallpap engine都能逛上一天( {x} {x} { } )。 看着桌面都能使用动态壁纸,于是我也想在html上实现 video标签是浏览器的默认视频标签,我也考虑过可能不同的浏览器会对视频标签进行修改,导致浏览器兼容问题。但我是真的没有找到其他的替代方式,想过canvas也可以实现动画,但是canvas也是使用video标签为图像源,所以就没有使用canvas,所以遇到如小米浏览器那样的浏览器就会出现一系列问题。我提出的解决方法是要么限制浏览器要么限制屏幕分辨率,我选择后者限制屏幕分辨率。这样也可以减少移动端浏览器负担，减少性能开销。 代码如下:
CSS
#DynamicWallpaper { left: 50% !important; top: 0 !important; margin: 0 !important; display: block; position: absolute; width: 100%; height: 100%; z-index: -520; position: fixed; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center;}
@media screen and (max-width: 768px) {
/*屏幕小于768px隐藏*/ #DynamicWallpaper { display: none; }}javascript
if (document.body.clientWidth >= 768) { //屏幕分辨率大于768px启用,避免屏幕小于768px通过css隐藏还会加载视频资源 var DynamicWallpaper = document.createElement("video"); //创建video元素 DynamicWallpaper.id = "DynamicWallpaper";//定义id DynamicWallpaper.src = "http://jacksen168.top/video/wallpaper.mp4";//视频链接 DynamicWallpaper.autoplay = true;//视频自动播放 DynamicWallpaper.muted = true;//视频静音(不想也可以设置为false或注释掉这一行) DynamicWallpaper.loop = true;//隐藏video视频控件 DynamicWallpaper.playbackRate = 1;//视频播放倍数 document.body.appendChild(DynamicWallpaper);//将元素添加到body里面}文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章 智能推荐
1
html 生成一对符合对比度需求的对比色 及对颜色间的对比度探究
文档 html 生成一对符合对比度需求的对比色 及对颜色间的对比度探究
2
米家智能家居人在传感器区段二进制转换器
项目 米家智能家居人在传感器区段二进制转换器(领普ES3 极客版 直观修改指南)
3
关于VSCode Git GPG签名开机第一次提交失败的探究
文档 探究并解决VSCode中使用GPG签名提交Git时,开机后第一次提交报错,第二次才能正常弹出密码框的问题
4
记一起Github账号被suspended后成功找回
文档 记一起Github账号被suspended, 历时一个月后成功找回
5
Bili Images Uploader
项目 Bili Images Uploader - 将图片上传到B站图床并通过评论实现持久化存储
随机文章 随机推荐