uniapp 启动页视频

传输门要是想改成视频，可以这样html<video autoplay><source src="../imgs/cs.mp4" type="video/mp4"></video>但是会发现，视频没有满屏css.con video {object-fit: fill;width: 100%;height: 100vh;}这样就是全屏的视频...

我我在线睡觉

3619人浏览 · 2021-08-30 13:44:54

我我在线睡觉 · 2021-08-30 13:44:54 发布

object-fit 传输门

在做启动页视频的时候遇到了这个属性 object-fit

语法

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器

contain 保持原有尺寸比例。内容被缩放

cover 保持原有尺寸比例，但部分内容可能被剪切

none 保留原有元素内容的长度和宽度，也就是说内容不会被重置

scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些

initial 设置为默认值

inherit 从该元素的父元素继承属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等

可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式

插件传输门

在 manifest.json 源码视图内配置

"splashscreen" : {
            "alwaysShowBeforeRender" : true,//首页白屏时不关闭启动界面
            "waiting" : true,//是否在程序启动界面显示等待圈或雪花
            "autoclose" : true,//是否自动关闭程序启动界面。
            "delay" : 10//启动界面在应用的首页面加载完毕后延迟关闭的时间
        },

要是想改成视频，可以这样
html

<video autoplay  width="100%" height="100%" style="object-fit: fill;">
	 <source src="../imgs/cs.mp4" type="video/mp4">
</video>
<!-- autoplay 自动播放 -->

这样就是全屏的视频

有人反馈这个的启动视频有默认加载和拉伸的问题

加 poster 属性默认加载和加 object-fit:cover 拉伸的问题就都解决了

poster 传输门

html

<video width="100%" height="100%" autoplay poster="../imgs/cs.png" style="object-fit:cover;">
		<source src="../imgs/cs.mp4" type="video/mp4">
</video>
<!-- autoplay 自动播放 -->
<!-- poster 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 -->