微信小程序 video全屏 Android手机按钮悬浮在视频上

最新推荐文章于 2023-02-24 10:22:05 发布
最新推荐文章于 2023-02-24 10:22:05 发布
阅读量2.1k 收藏 1
点赞数
文章标签： 微信小程序 video 全屏按钮悬浮 video飘浮按钮 video组件层级太高
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39725702/article/details/94627197
版权
问题： 微信小程序 video全屏时按钮要悬浮在视频上

解决：用<cover-view>组件，设置position,z-index，并放在<video>组件中
要把 cover-view 作为 video 的子节点，全屏时才能在显示(否则在android手机端不显示）。

<video>
    <cover-view></cover-view>
</video>
weixin_39725702
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序video层级过高 ！解决方案之------- cover-view！
weixin_43099985的博客
10-09 1万+
在小程序用应用视频地图等组件时会发现由于这些组件层级过高会覆盖到我们的导航栏！即使我们设置了定位给z-index 9999， 但是在真机测试时依然会失效！那么就要用到组件盖视图 &lt;video src=""&gt;&lt;/video&gt; &lt;cover-view&gt;我要盖住你&lt;/cover-view&gt; 用盖视角写导航栏就可以覆盖到视频上面了！但是有几个小坑要注...
uni-app/微信小程序video组件层级过高覆盖悬浮按钮
热门推荐
Syleapn的博客
07-30 1万+
uni-app/微信小程序video组件层级过高覆盖悬浮按钮： 一、出现的概率与场景 具有偶然性，即概率性出现，也针对一些手机，尤其在ios版本的一些手机上！ 二、分析： 大体分析说明： 一般的解决方法是采用原生组件cover-view，有图片的话再结合vover-image。但是，一般的悬浮按钮是相对于手机屏幕进行固定的（即不会随着划动被移动），如果采用cover-view...
videoUI视频切换播放和全屏播放微信小程序
08-10
videoUI 视频切换播放和全屏播放 微信小程序
微信内置浏览器在使用video标签时（安卓）默认全屏的原因及解决办法
aau88497的博客
08-29 522
根据X5论坛得到的答案是：设计如此。 　　腾讯真是越来越嚣张了，一家独大后用户体验都不注重了（不给程序员留活路）。 　　听说有个申请加入vdeo白名单的，域名验证后就可以解决默认全屏（反正我是没见过申请入口，不给钱，想进来没门。） 最终的解决办法： 　　将video转化为canvas，逐帧播放，不过canvas貌似最高可以达到60帧/s，不过页够用了（扯淡：玩LOL起码要150F...
[Android] (Android 视频悬浮窗)
android
10-29 5319
自己最近再做Android相关的项目，所以闲下来的时候摸索了一下悬浮窗播放视频。 # 1【准备工作】 # 1.1 MediaPlayer的使用 既然是悬浮窗播放视频，那么首先就要了解Android怎么播放视频。这里做简单的介绍。 视频播放的调用步骤： (1). 装载播放资源 MediaPlayer.setDataSource() , 也何以使用 MediaPlay.oncreate(conte...
安卓微信video标签浮在最表层覆盖分享框问题
kirsten_z的博客
03-30 6071
问题：安卓微信里的video标签在播放后中是浮在最表层，覆盖了分享框，效果如图： 解决：暂时解决方案 在点击分享时，除去video标签，添加一个图片，隐藏分享框后，在添加一个video标签 html如下：<div class="video_box" id='video_width' style="padding-bottom: 15px;"> <div class="video_tit
微信原生小程序在video上定位元素时使用绝对定位滚动时会跟随滚动浮动
weixin_43465396的博客
01-14 380
微信原生小程序
169-微信小程序-音乐影音之家.zip
最新发布
06-11
在小程序中处理音频和视频内容时，需要理解微信提供的多媒体API。例如，wx.createVideoContext和wx.createAudioContext接口可以用来控制视频和音频的播放、暂停、切换等操作。"音乐影音之家"可能需要实现播放进度条...
微信小程序视频视频背景与控制处理（笔记）
08-23 7567
想用一个全屏的视频当做小程序背景，然后呢，更坑爹啊，上传单个素材2M限制。 注意： 1：用video组件时候，原生组件z-index无论如何都不会比他更高的，要用新的cover-view 2：视频格式MP4支持AVC（H264）把你的视频拖到chrome试试，就知道了。 不然你会看到： The element has no supported sources. 3：视频控制，实现全屏，用...
微信小程序-仿芒果TV
05-27
- 需要注意版权问题，确保获取的芒果TV视频资源合法且允许在小程序中播放。 6. **用户交互与事件处理** - 小程序中的事件绑定使用`bindXXX`形式的方法，如`bindtap`用于点击事件，`bindplay`用于播放事件等。 - ...
微信小程序中悬浮窗功能的实现代码
12-29
问题场景 所谓悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。 这算是一个比较常见的实现场景了。 为什么要用cover-view做悬浮窗？原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view，而是view。 这是简化的代码结构： index.wxml: <image class=img src=https://ss2.baidu.
android仿微信播放视频播放器,vue DPlayer 仿微信朋友圈视频播放效果
weixin_31070201的博客
05-26 842
html点击全屏点击切地址css.dplayer {width: 100%;}.dplayer-controller {/* 底部控制条 */display: none;}.dplayer-notice {/* 快退进提示 */display: none;}.dplayer-menu.dplayer-menu-show {/* 右键信息 */display: none;}.dplayer-mask...
创建网页Video上的悬浮工具条(Create toolbar overflow video on webpage)
在路上
06-19 3178
创建网页Video上的悬浮工具条Create toolbar overflow video on webpage 前些天研究使用javascript脚本操作网页上的视频控件.因为设计的需要,想要在视频窗口上增加一个弹出式的工具条,类似于Realone的全屏按钮,当鼠标移动到视频区域时,工具条可以弹出,超过一定时间不操作,工具条可以自动隐藏.       但是在试验过程中使用Wind
uniapp video播放，视频上方显示可操作按钮
jackeylovestar的博客
10-18 1954
uniapp video播放，视频上方显示可操作按钮
video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载
jinse29的博客
02-24 4323
最近遇到的需求就是重新video标签的控制栏的样式，包括进度条、音量、倍速、全屏等样式，在正常状态下，可以将原生样式隐藏掉自定义新的控制栏元素定位上去，但是全屏后样式失效，出现的还是原生的控制栏。只能曲线救国，说白了就是让video的父级全屏，进而让video也屏，控制栏的自定义组件样式定位上就可以了。具体是f12 可以看出，自定义的组件其实还在原先的位置，全屏后的video新增的伪类和样式无法修改，未全屏状态下自定义控制栏的组件样式。全屏后，发现控制栏已经变成原生的样式。
微信小程序video组件层级过高问题
落叶知秋の博客
07-08 1762
微信小程序video组件层级过高问题 微信小程序新手,在实际的项目开发者遇到video组件层级过高的官方bug,始终浮在元素的最上层,弹窗会被视频覆盖,几经摸索,找到以下解决方案(项目不得不向bug妥协) 1.让用户更新到新版微信客户端,7.0.4微信客户端已修复该问题 2.使用cover-view组件作为弹窗容器(wxss支持不全,很多样式不能使用) 3.改变视图位置,当弹窗弹起时,改变scro...
微信小程序cover-view的坑
code
06-24 1105
原生组件在真机的表现不同 显示层级问题 原生组件不支持z-index改变显示层级，后面的标签会在顶层显示 iOS cover-view文字显示不出来的问题 iOS上部分CSS样式不支持，如果使用了会导致文字显示不出来，可能造成影响的有 display: flex; flex-direction: column; justify-content: center; align-items: center; iOS cover-view文字显示半截 iOS上计算宽高有问题，解决办法是使用固.
cover-view是真的坑
songjuntao8的专栏
03-12 716
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上面的元素就乱七八糟 cov
微信小程序 cover-view 覆盖多个video组件
xinbear的博客
11-07 4579
项目页面中有视频列表，会有多个video组件，如果需要有浮层覆盖住全部的video组件 可以将cover-view标签放到最外层  便可覆盖 &lt;video&gt;&lt;/video&gt; &lt;video&gt;&lt;/video&gt; &lt;video&gt;&lt;/video&gt; &lt;video&gt;&lt;/video&gt; &l
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值