uniapp 修改 video 组件css样式

最新推荐文章于 2024-06-28 13:43:39 发布
最新推荐文章于 2024-06-28 13:43:39 发布
阅读量2.3k 收藏 2
点赞数 1
分类专栏： uniapp 前端 css 文章标签： css uni-app 前端 video
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014724048/article/details/129534034
版权
uniapp 同时被 3 个专栏收录
7 篇文章 1 订阅
订阅专栏
前端
6 篇文章 0 订阅
订阅专栏
css
1 篇文章 0 订阅
订阅专栏

uniapp   video标签默认的.uni-video-container样式background-color带有黑色背景

滑动播放视频列表时，第一个视频会一闪黑屏，实际上是标签本身的样式设置背景颜色。去掉一闪而现的黑色背景如下：

/deep/ .uni-video-container {
	background-color: transparent;
}

修改这种内置的标签啊组件的样式 一定要在前边加上  /deep/     才能成功重置样式。

修改其他内置组件、标签的样式照葫芦画瓢就行了！

 

星星~笑笑
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniApp美化原生Video界面
u014606464的博客
04-24 1806
于新手，在uniApp中原生组件的层次问题耗了好几天，网上找了好多解决方案，最终选用cover-view解决了原生组件的层次问题，但是还有个别的问题（待处理），比如，在视频全屏的情况下，cover-view会被遮挡！如图: 我的做法是，默认情况下先把video的controls改为false，当视频全屏是再改为True，这样勉强可以解决全屏后video控件不显示问题。 这里就不贴代码了，主要思路就是怎么让video这个原生组件不遮挡其它组件！我选用的是cover-view，uniApp...
uniapp修改组件默认样式
qq_42756268的博客
05-13 7714
修改uniapp组件默认样式 刚开始用uni-app写分页这个功能用的是uni-app官网Pagination 分页器这个东西 样式是真的难看！！ 于是我通过查询各种资料和渠道终于总结出了在uni-app修改组件样式的问题。废话不多说上图片： 只需要通过调试工具点击你想要改的模块然后获取class至于后面的[data-v-223d7328]不用管 <style scoped> /deep/.uni-pagination__num-current-text{ font-size: 13px
uni 中使用video在移动端层级过高问题解决方案
weixin_50408263的博客
08-25 3395
通过控制自动全屏播放和退出全屏播放后暂停播放，来避免页面划走后视频仍旧播放的问题，但是，出现了封装在组件中的video 的api失效的问题。这个方法可行，但是咱们是包在swiper里的，current发生改变的时候，子窗体会出现渲染延迟问题。我们给swiper塞两个东西，一张普通的图片，一张视频的封面图，用返回类型来进行判断展示。我们把swiper里注入视频的封面图，给一个点击事件，点击打开弹出层自动开始播放视频。项目中的轮播图中包含图片和视频，点击视频进行视频播放。首先层级问题，网上有很多种解决方法。
uniapp,video标签在app端使用
最新发布
weixin_57663472的博客
06-28 362
原因：video是原生标签，在app使用，会造成层级过高的原因，导致页面布局错乱。在h5端可以正常显示。解决：第三方插件ls-dom-video(在插件市场)
记录:uni运行H5使用原生video标签、富文本查看图片等
qq_47244439的博客
09-27 1206
于是第一步先到处查阅资料看有没有什么插件可供h5使用并且显示静音按钮等完善的功能，在不懈努力下找到了一个x-video插件，但兼容的不够完善，被弃用；中途还使用了很多类似于“x5-video-player-type="h5" ”的这种属性 ，但是也毫无作用，因为根本不是原生的video标签(内心os：心已死)；最后终于在使用富文本的时候，突然发现。，而uni-video标签在h5中有很多无法使用的属性 例如：无法显示静音按钮，无法使用倍速、画中画等；(为什么没有早点想到，感觉脑子很木)
基于uniapp的uni-video和原生video处理小记
qq_36296358的博客
04-24 746
想通过uniapp实现调用USB摄像头实现推流到video标签功能，发现摄像头启动了，但是无法预览在页面上。
手把手教你uniapp原生插件开发-（无限制缓存）video控件的实现
sfsgtc的博客
04-25 2333
本人对官方原生插件离线包进行修改，封装了一个video控件，可实现任意大小的缓存。
web及uniapp中自定义 video 标签样式 （一）
UncleWen007的博客
07-12 922
如何修改web端及基于uniapp的小程序中video标签的默认样式
Uniapp 多功能富文本编辑组件 可多端使用 H5插入
09-18
- `static`：通常用于存放静态资源，如CSS样式文件、JavaScript脚本或图片等，这些资源会被直接引用到组件中。 综合以上信息，我们可以得出，这个“Uniapp多功能富文本编辑组件”是一个独立、易用且跨平台的富文本...
解决uniapp开发抖音小程序video-player覆盖问题，超详细教程，前端相关操作，已成功上线产品
03-28
在uniapp框架中进行抖音小程序开发时，可能会遇到video-player组件覆盖问题，这通常是由于布局、样式冲突或者组件配置不当导致的。本教程将详细解析如何解决这一问题，并且已经成功应用于上线产品，确保方法的有效性...
前端面试题html+css+js+ts+vue+react+uniapp
04-12
**CSS**：Cascading Style Sheets用于控制网页的样式和布局。理解盒模型，浮动与定位，响应式设计（媒体查询），Flexbox和Grid布局系统，以及CSS预处理器（Sass, Less）的应用，能够帮助创建美观且适应各种设备的...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
10-15
在本文中，我们将深入探讨如何使用vue-video-player组件在微信环境中解决自动全屏播放以及横竖屏导致的样式错乱问题。vue-video-player是一个流行的Vue.js插件，用于实现视频播放功能，但它可能在某些特定环境下，如...
Uniapp 视图容器 随机拖拽滑动 放大缩小 movable-view movable-area
09-11
- **样式**：通过 CSS 样式可以进一步定制 `movable-view` 的外观，如边框、背景色等。 2. **movable-area**： - **属性**：`movable-area` 主要用于设置 `movable-view` 的可移动范围，没有太多额外的属性，但它...
uniapp视频取消控件展示，使用slider自定义视频进度条
MarchS的博客
03-14 2265
通过uni.createVideoContext('myVideo')获取video对象，视频初始化结束的时候@endLoading获取到视频的时长endTime， 视频帧刷新的时候@timeupdate获取当前视频播放的时长startTime。图片资源：control_play.png/control_pause.png。思路：video标签 :controls="false"，不展示自带的控件，代码：需要自己添加图片和视频地址。slider标签进行数据展示。
uni-app的video组件中实现倍速播放功能
dzry_lr的博客
12-06 4187
uni-app的video组件中实现倍速播放功能
uniapp中video标签设置controls显示问题
随风飘的博客
10-11 2162
最近，在uniapp项目中设置了video的控制条controls='false'不显示，但是不生效，仍然显示，后来直接在样式中修改.uni-video-bar后才不显示：}
uniapp video（倍速功能、层级过高、视频第一帧做封面 等问题）
tengyuxin的博客
05-23 7068
逻辑上就是再url后面，添加?出现上下出现黑边的原因是： object-fit ：contain；需要修改为 fill 就可以了。我想要在video视频上面显示内容，可是无论怎么在view中使用定位，都无法盖住视频。后来使用cover-view就可以了。
vue/uni-app 设置（或动态设置）页面背景色超全方法 以及各种可能问题解决（不要比我倒霉）
热门推荐
weixin_44235032的博客
10-21 1万+
关于vue/uni-app修改页面背景色（小程序内）踩坑实录！
uniapp项目H5端横屏问题-样式错乱+字体大小+video
Penk的博客
06-14 7445
uniapp项目H5端，如果手机打开了自由旋转，横屏问题就会出来，样式错乱、字体大小、以及使用遮罩层级没有video 高的问题。
uniapp ， video组件 自动播放
03-30
要使uniapp的video组件自动播放，需要将autoplay属性设置为true。例如： ``` <video src="path/to/video.mp4" autoplay></video> ``` 同时，为了确保视频能够自动播放，需要在manifest.json文件中将uniapp的页面路由设置为“uni://xxxxx”，如下所示： ``` "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" }, "window": { "backgroundColor": "#ffffff", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" }, "nvue": { "usingComponents": { "video": "../../components/uni-video/uni-video" } }, "preloadRule": { "network": "all", "packages": [], "async": [] }, "usingComponents": { "uni-video": "../../components/uni-video/uni-video" }, "name": "uni://xxxxx/pages/index/index" //这里设置为uni://xxxxx } ] ``` 需要注意的是，自动播放在一些移动设备上可能会被浏览器禁用，因此最好在用户点击后再播放视频。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值