微信小程序 video 全屏时 覆盖在原生组件之上的内容 不显示

最新推荐文章于 2024-05-15 11:14:46 发布
最新推荐文章于 2024-05-15 11:14:46 发布
阅读量2.1k 收藏 7
点赞数
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjh18831423051/article/details/124295977
版权
本文介绍了在小程序中，如何使用cover-image和cover-view标签确保文本视图和图片视图在部分安卓手机的全屏video上正确显示。通过将这些标签放置在video标签内部，可以避免内容被全屏视频覆盖的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

小程序提供了俩个标签
 cover-image： 覆盖在原生组之上的图片视图

cover-view：覆盖在原生组件之上的文本视图

需要将需要覆盖在video之上的标签 放到video标签内

<video 
    id="myvideo"
    title="视频" 
    autoplay
    src="视频地址"
>
    <cover-view class="anthology">选集</cover-view>

    <cover-view class="Last_record">上次观看</cover-view>
</video>

若不将需要显示在在全屏之上的标签放到video标签内 在部分安卓手机会出现被全屏视频所盖住的情况

解决cover-view在安卓机上盖不住原生组件的问题
SAKURE2210866448的博客
03-31 2167
起因是公司需要做的小程序，需要一个自定义的导航栏，类似于这样： 由于使用的原生的组件canvas,在真机测试的时候，出现了菜单无法遮盖canvas的情况。如下图： 查询资料了解到 ，是因为原生组件层级的原因。 通过使用cover-view解决了以上问题。 但是安卓机真机测试时发现，即使使用了cover-view依然无法覆盖。 查阅资料发现，原因在于系统页面渲染的差异，在安卓中页面dom的渲染并不是...
uni-app/微信小程序video组件层级过高覆盖悬浮按钮
Syleapn的博客
07-30 1万+
uni-app/微信小程序video组件层级过高覆盖悬浮按钮： 一、出现的概率与场景 具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！ 二、分析： 大体分析说明： 一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...
微信小程序覆盖在全屏视频上的按钮
sam的博客
04-23 854
覆盖在全屏视频上的按钮 示例库 代码片段
小程序直播或者视频播放，在使用live-player全屏，cover-view覆盖不上去，值得注意的地方
贤和知识点收藏
11-09 1万+
最近在做小程序视频客服这块的功能，按照官方或者是别人的写法，在拷贝的过程中存在一定的误区，具体误区为： 1、在使用live-player标签的过程中，自以为是你想的那样使用，最好是先看一两遍文档，一下是需要且多看几下的 2、官方组件live-player,在标签的开头和结尾需要注意的，具体例子下面例子有说有 &lt;live-player src="https://domain/pul...
video标签样式铺满全屏
热门推荐
linfng023的博客
04-19 9万+
video标签是不会自动铺满整个div的，即便是给它设置了高度为100%；所以当需要video标签铺满整个div时，可以给video标签加上‘object-fit:fill’样式，这样就可以解决了！ <div class="videoContent"> <video class="videoElement" controls preload="auto" width="100%" height="100%"></video> </div> .video
小程序cover-view 无法覆盖canvas 不显示
qq_30989569的博客
07-13 1960
怎么能设计出这种东西 cover-view只支持嵌套 cover-view、cover-image、button（模拟器没问题，真机不可用，这是真的坑） 所以有覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher的需求，其他开源组件基本都不可用，全部需要自己写，而且还只能用这三个实现cover-view、cover-image、button cover-view上面使用相对定位，当video标签大小发生变化的时候，cover-view上面的
小程序video和live-player 覆盖样式
Mr_wuying的博客
06-04 3524
程序的video和live-player 不会被view标签覆盖，即使用了z-index也不行。 官方有说明。 cover-view 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性...
微信小程序 video详解及简单实例
11-29
`<video>` 组件用于在小程序中嵌入视频内容，它支持多种属性和事件，以满足不同场景的需求。以下是一些常用属性： 1. src：设置视频源，可以是网络地址或本地资源路径。 2. mode：控制视频的显示模式，如"normal"...
微信小程序仿抖音视频之整屏上下切换功能的实现代码
10-15
在微信小程序中实现抖音视频的整屏上下切换功能，主要是为了提供用户类似抖音App的浏览体验，即在全屏模式下，用户...注意优化性能，避免频繁操作导致的卡顿，确保用户在小程序中也能享受到类似原生应用的观看体验。
微信小程序上实现滚动播放等视频相关的效果
08-10
在小程序中，我们可以使用`<video>`组件来展示视频内容。这个组件支持多种属性和事件，使我们能够实现各种自定义功能。 二、滚动播放视频 在微信小程序中实现滚动播放，主要涉及到以下几个关键步骤： 1. **监听...
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
11-21
对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。 这可能是大部分前端开发者一贯的思维模式，拿来一个插件，看着demo就做出来了，功能展示正常就OK了，但是一旦出了bug，就会面向百度编程或者面向Google编程！ 其实，我也是这样的，哈哈哈哈….. 废话不多说，最近在做一个视频播放的功能，找到vue-video-player插件后，咔咔咔完事，拿着我的爱疯，完美演绎！但是其他人的国产某牌手机，展示的完全不一样，打开后自动全屏，而且还有个横竖屏控制。“这是我写的页面？？？？？”，心中一万只神兽在奔腾。横竖屏切换后，视频
微信小程序全屏遮罩层代码
08-11
微信小程序全屏遮罩层代码。代码简洁，适合定制开发。
自定义video播放组件-可全屏可加速兼容移动端
10-21
自定义video播放组件，自写控制条，可全屏观看，可调节播放倍速，兼容移动端
微信小程序video自定义control
hangGe0111的博客
11-11 3813
1.背景： 有些时候需要用到video自定需求，可以参考如下案例 2.思路 2.1 把原生的controls（底部的控制，进度条，暂停播放）隐藏掉，然后自己重写controls： 2.2 把原生的show-fullscreen-btn（全屏，退出全屏）隐藏掉，并重写； 2.3 定义bindplay（播放），bindpause（暂停），bindended（播放完毕），bindtimeupdate（更新播放时间，在拖动进度条时需要用到），一一通过代码实现即可 3.代码： 3.1wxml <v
小程序video组件的自定义全屏/兼容安卓机的黑边填满容器/video全屏时自定义按钮被覆盖
dghgjuyhuoyho的博客
11-23 3508
1.自定义全屏按钮被覆盖 按钮标签必须在video组件里全屏的时候才能显示出来, 2.在安卓机里视频有黑边 首先需要在video标签写入 x5-video-player-type="h5" object-fit='cover'style="width= 100%; height=100%"这样在安卓机里就不会有黑边了 3.自定义全屏事件(在真机调试或者预览时会有问题但是!!!打包发布测试服后是正常的) <video id="myvideo" :c...
微信内置浏览器video标签自动全屏播放以及层级过高问题
paopao180的博客
09-16 4179
今天事用html5的<video>标签做微信内置浏览器视频播放页面时，需要在视频层级上显示类似弹幕的对话。发现部分机型（华为P40 pro,oppo reno,iphone7p）上点击播放视频后，视频自动全屏播放，页面其他元素无法显示。探索良久，找出如下解决方案： 1、ios: 只需要添加属性： x5-playsinline playsinline webkit-playsinline 即可解决。例： <video src="视频地址" poster="视频封面" cont.
微信小程序中video全屏遮罩
jl15988
05-15 794
来实现，非全屏时支持同级遮罩可以直接同级使用。由于 video 的层级非常高，所以使用。
视频全屏播放不显示遮罩？
haluodepaopao的博客
08-12 1815
video全屏播放显示遮罩 需求是这样的，视频播放完成后会弹出一个遮罩，当视频不是全屏的时候，遮罩可以正常显示，但是当视频是全屏的时候，遮罩不会显示出来，我当时在网上查了很多资料，都没能给出一个合理的方案，于是我就从video插件开始入手，于是我找到了解决方案，就是video.js。 为什么我们不能通过z-index实现呢？ video在全屏播放时候设置z-index不管用，因为全屏播放当前视频的显示会比任何元素的显示层级高，并且根本就不能在样式中找到z-index，设置z-index就更不管用了。所以不管
海创软件组-两周小结-video-vue-全屏-hover样式-css变量
m0_46627730的博客
05-02 777
写这篇博客来总结一下两周遇到的问题吧。 一、视频组件 由于往后的日子需要做一个交通管理系统，需要使用到视频播放器，所以花了点时间在视频组件上。 视频播放器，我一般都是采用video.js和他的插件vue-video-player两种方式创建的。 首先就先说一下如何使用video.js吧 1：video.js 需求：对于简单的视频播放需求来说，video.js足以胜任了。 它可是支持HTML5和Fl...
微信小程序video标签去掉组件中小窗
最新发布
04-26
<think>好的，我现在需要解决用户在微信小程序中如何禁用video标签的小窗播放功能的问题。首先，我要回忆一下微信小ideo组件的相关文档和可能的配置选项。 用户提到的小窗播放功能，通常是指当用户切换到后台或离开当前页面时，视频会以画中画（小窗）形式继续播放。这可能是因为微信小程序默认启用了小窗播放功能。为了禁用这个功能，我需要查找video组件的相关属性。 查阅微信小程序的官方文档，video组件有几个属性，比如enable-play-gesture、auto-pause-if-navigate、auto-pause-if-open-native等。不过，这些可能不直接控制小窗播放。可能相关的属性是page-gesture或者picture-in-picture-mode。但根据之前的引用，用户提到过使用enable-progress-gesture来禁止拖动进度条，类似地，或许存在某个属性可以控制小窗播放。 在引用[3]和[4]中，提到了使用enable-progress-gesture="false"来禁止进度条拖动，这可能需要结合其他属性。不过关于小窗播放，可能没有直接的属性，需要通过其他方式实现，比如阻止视频在页面切换时继续播放。 另一个思路是，当用户离开页面时，强制暂停视频。这可以通过监听页面的生命周期事件，例如onHide或onUnload，在这些事件中调用videoContext.pause()方法。同时，设置video组件的auto-pause-if-navigate属性为true，当跳转其他页面时自动暂停。但这样可能无法完全禁用小窗，只是暂停视频。 用户提供的引用[1]中的代码展示了如何通过自定义组件控制视频的播放和暂停，可能需要结合页面生命周期来强制暂停。例如，在onHide事件中暂停所有视频，这样即使触发小窗，视频也不会播放。 另外，微信小程序的video组件是否有picture-in-picture-mode属性？可能需要查看最新文档。假设存在picture-in-picture-mode属性，将其设置为false可能有效。例如： <video picture-in-picture-mode="false"></video> 但需要确认该属性是否存在。如果不存在，可能需要其他方法，比如使用cover-view覆盖，或者动态控制视频播放状态。 在引用[2]中，用户使用cover-view覆盖video标签来阻止点击播放。类似的方法是否可以用来阻止小窗播放？可能不太直接，因为小窗是系统行为，而非用户点击触发。 综合以上分析，可能的解决方案是： 1. 设置video组件的相关属性，如auto-pause-if-navigate和auto-pause-if-open-native为true，使切换页面或打开原生组件时自动暂停。 2. 监听页面的onHide事件，主动暂停所有视频实例。 3. 如果存在控制画中画的属性，如picture-in-picture-mode，设置为禁用。 例如： 在wxml中： <video id="myVideo" src="{{src}}" auto-pause-if-navigate="true" auto-pause-if-open-native="true"></video> 在js中： onHide: function() { this.videoContext && this.videoContext.pause(); }, onReady: function() { this.videoContext = wx.createVideoContext('myVideo', this); } 此外，可能需要测试不同的属性组合，或查看是否有隐藏的属性可用。如果官方没有提供直接禁用的属性，可能需要通过上述方法间接实现禁用小窗播放的效果。</think>在微信小程序中禁用video标签的小窗播放功能，可以通过以下方法实现： ### 一、基础属性控制 1. 设置`auto-pause-if-navigate="true"`和`auto-pause-if-open-native="true"` 这两个属性可在页面跳转或打开原生组件时自动暂停视频： ```html <video src="{{videoUrl}}" auto-pause-if-navigate="true" auto-pause-if-open-native="true" ></video> ``` 该方法能间接减少小窗触发的可能性[^1][^3] ### 二、强制生命周期控制 2. 通过页面生命周期主动暂停视频 在`onHide`和`onUnload`生命周期中强制暂停： ```javascript Page({ onHide() { this.videoContext && this.videoContext.pause() }, onUnload() { this.videoContext && this.videoContext.stop() }, onReady() { this.videoContext = wx.createVideoContext('myVideo', this) } }) ``` 此方法可确保页面隐藏时视频立即停止[^1] ### 三、进阶方案 3. 使用全屏模式+手势限制（需结合业务场景） ```html <video id="myVideo" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" enable-progress-gesture="false" ></video> ``` 通过强制全屏播放可规避小窗模式，但会改变用户交互体验[^3][^4]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值