uniapp 启动页视频

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 属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像 -->

uniapp 启动页视频相关推荐

uni-app 启动页，引导页，广告页
1 勾选自定义启动图这个需要打包才能生效 2 引导页,广告页 1 plus.navigator.closeSplashscreen();//为关闭启动页,需要设置启动页为不自动关闭 2 请求接口后再 ...
uniapp启动页拉伸
直接正文启动页拉伸目前我这的解决方案为图片换成 1080_2340.9.png 的图. 首先你要有这个png的图然后去这个网站做.9.png的图传送门那个线拉到最边上(上下左右四条线),不然会 ...
Android-VideoView启动页视频，8.0崩溃解决
0. 准备视频.mp4放在res/raw内 1. 布局文件:activity_launch_video.xml 宽度自适应大小居中,高度占满全屏,设置背景色. <LinearLayout xml ...
uniapp启动页，底部虚拟按钮向上闪一下的问题
manifest.json "app-plus" -> "distribute" -> "splashscreen节点新增 " ...
uniapp做自己的启动页
精神饱满的开始学习啦,什么是启动页??看下图,这就是启动页,启动页面是在manifest.json -> App启动界面配置中进行配置的,它默认的是开启了,但是细心的小伙伴会发现,启动页是app ...
uniapp 引导页启动页闪屏页功能介绍及部分功能实现
启动页设置 uniapp自带的启动页是一个白底的页面,上面有个uni的logo,然后周围有个圆圈的进度条,这个是启动页. uniapp中可以自定义启动页,注意两点: 不要勾选"启动界面显示等 ...
uni-app 启动广告页
最近公司要求在项目启动时,增加个性化图片页面, 1 在跟目录新建hybrid 文件夹代码结构如下 advertise.html 代码,该代码时拷贝的别人的,忘了是谁的了如有维权,请及时联系 <! ...
《uni-app》一个非canvas的飞机对战小游戏-启动页
这是一个没有套路的前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言-博主看到后会去代替大家踩坑的-接下来的几篇都是uni-app的小实战,有助于我们更好的去学 ...
uniapp ios启动页自定义
拿到设计稿之后在xcode里面创建项目 New Image Set 把启动页需要的图片拉入,可以多创建几个然后拉入text Filed 创建文本,拉入Image View创建图片或者背景,编辑位置 ...
uni-app设置APP启动页显示时长
最近在使用uni-app开发APP,发现打开APP后启动页总是一闪而过(因为首页已经渲染完成,会自动从启动页跳转到首页),很显然这不符合我们预定的时间要求. 官方对于启动页的相关设置如下: 但是在实际 ...

uniapp 启动页视频

uniapp 启动页视频相关推荐

最新文章

热门文章