解决微信小程序视频组件层级过高的问题
本文首发于我的个人博客:http://www.fogcrane.org
前言
在微信小程序的开发中,总有一些“VIP”组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之上。
诸如:video组件、map组件、canvas组件等。现在就让我来讲讲如何巧妙的解决掉这个问题。
问题描述
由于视频组件层级过高并且无法使用z-index进行控制层级,导致许多人都无法在视频组件之上放置一些其他的组件。
为此,一些漂亮的视频设计往往还没开始就宣告了结束。上一张官方文档的相关说明:
解决方案
解决思路其实也挺简单的。今天就暂且不宣扬愚公移山的精神了,我们今天选择绕过眼前的大山。既然视频层级很高
很高,并且我们不能降低视频层级或者提升其他组件层级已覆盖视频组件。那么我们就选择只在恰当的时候才让视频
组件出现在我们的页面中。那么问题就显得简单起来了。思路大致如下:
- 在渲染页面的时候,使用假视频来代替视频组件,换言之就是使用视频封面充当一个视频组件。
- 当用户点击视频封面时,进行两步操作,第一,隐藏视频封面;第二,播放视频。
- 当存在同一页面多视频的时候,需要进行视频切换的处理。
接下来直接上代码了:
首先是wxml的代码:
<!--index.wxml-->
<view>
<view class="margin_bottom--100" wx:for="{{items}}" wx:key="unique">
<view class="video-container">
<view class="video" data-id="{{item.id}}" bindtap="videoPlay" >
<video wx:if="{{curr_id == item.id}}" id="myVideo" style="width: 750rpx;height: calc(9 * 750rpx / 16);" id="myVideo" src="{{item.src}}"
poster="{{item.poster}}" objectFit="cover" controls></video>
<view wx:else >
<image class="model-img" style="width: 750rpx;height: calc(9 * 750rpx / 16);" mode="aspectFill" src="{{item.poster}}"></image>
<view class="model-btn">
<view class="play-icon"></view>
</view>
</view>
</view>
</view>
</view>
<view class="text">
<text>我是遮挡层。</text>
</view>
</view>
接着是js的代码:
//index.js
Page({
data: {
curr_id: '', //当前打开的视频id
items: [
{
id: 1, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
}, {
id: 2, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
},
{
id: 3, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
},
{
id: 4, src: 'https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', poster: 'http://ow74m25lk.bkt.clouddn.com/shilan.jpg'
},
],
},
onReady: function () { //创建视频上下文对象
this.videoContext = wx.createVideoContext('myVideo')
},
videoPlay(e) {
this.setData({
curr_id: e.currentTarget.dataset.id,
})
this.videoContext.play()
}
})
最后是css的代码:
/*index.wxss*/
.video{
margin-bottom: 40rpx;
position: relative;
}
.model-img{
width: 100%;
height: 420rpx;
}
.model-btn{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
width:100rpx;
height:100rpx;
border-radius:50%;
background-color: rgba(0,0,0,.3);
}
.play-icon{
margin:28rpx 42rpx;
border-top:26rpx solid transparent;
border-left:36rpx solid #fff;
border-bottom:22rpx solid transparent;
}
.text{
width: 100%;
height: 100rpx;
line-height: 100rpx;
text-align: center;
background-color: red;
color: #fff;
position: fixed;
bottom: 0;
}
以上,就是全部代码了,附上运行结果图:
代码下载
自定义视频组件代码,密码为30s3
结语
好看的皮囊千篇一律,有趣的灵魂万里挑一。祝各位都是有趣的程序媛/猿。嗨起来٩(๑❛ᴗ❛๑)۶
解决微信小程序视频组件层级过高的问题的更多相关文章
- 微信小程序 视频 组件
video 组件 视频组件 相关的api :wx.createVideoContext 支持的格式: 支持的编码格式 video 组件的属性: src:类型 字符串 必填 要播放视频的资源地址 (支持 ...
- 如何解决微信小程序界面适配问题-引用-生命周期回调函数-优化机制-样式引入
如何解决微信小程序界面适配问题 .wxss page{ height: 100%; width:750rpx; } this.setData({ imageWidth: wx.getSystemInf ...
- 解决微信小程序登录与发布的一些问题
解决微信小程序的问题 图片在电脑上显示但在手机上却无法显示的问题 要使用的是本地图片,不想把图片上传到网络再通过https的方式解决,解决方法如下: 1.image src中的图片地址对英文字母大小写 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 微信小程序视频地址
微信小程序视频系列教程完整版,课程中用到的源码附在帖子最后. [url=http://bbs.larkapp.com/forum.php?mod=viewthread&tid=5673][b] ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
随机推荐
- [USACO09DEC]视频游戏的麻烦Video Game Troubles(DP)
https://www.luogu.org/problem/P2967 https://ac.nowcoder.com/acm/contest/1077/B 题目描述 Farmer John's co ...
- 6)HTML中a链接跳转地址怎么写
(1)看 thinkphp5的 附录--->助手函数 --->url 利用url进行书写地址跳转: 比如,你想跳转到cate控制器下的lst方法: <a href=" ...
- 吴裕雄--天生自然python学习笔记:python 用pygame模块制作一个音效播放器
用 Sound 对象制作一个音效播放器. 应用程序总览 程序在执行后默认会把 WAV 音频文件加载到清单中,单击“播放”按钮可开始 播放,同时显示 “正在播放 xxx 音效”的信息 . 播放过程中,可 ...
- vue中v-on支持的事件总结
资源事件 事件名称 何时触发 error 资源加载失败时. abort 正在加载资源已经被中止时. load 资源及其相关资源已完成加载. beforeunload window,document 及 ...
- ORs-1-introduction
introduction: 1.Olfactory receptors (ORs)很重要 2.已知的ORs的分子结构,但仍存在没清楚的地方: Though the relationship betwe ...
- EXAM-2018-8-9
EXAM-2018-8-9 B 水题 注意理解题意 有坑 G 博弈 观察发现 总是会进行到最后两个,或者先手取完全部,再特判一下只有一张牌的情况 H 九连环 通过找规律 我们可以得出递推式: F[n] ...
- 在Linux生成公钥后,使用git拉代码仍然需要密码的问题
一顿回车生成公钥后,用git拉代码还是需要输入密码 原因比较简单,在于.ssh 文件夹 及 authorized_keys文件的权限问题,全部修改为 700 即可,用下面命令 chmod -R 700 ...
- python后端面试第五部分:Linux操作系统--长期维护
################## Linux操作系统 ####################### 1,讲一下你常用的Linux/git命令和作用: 2,查看当前进程是用什么命 ...
- 网页title滚动
); var leftstar=title.substring (1,title.length ); document.title =leftstar +firstch ; ...
- Spring MVC及与structs MVC对比
一.Spring MVC MVC: Model + View + Controller(数据模型+视图+控制器) 三层架构: Presentation tier + Application tier ...