小程序视频播放组件video
最近在做一个视频播放的功能,要求如下:
1、实现视频的全屏播放;
2、实现视频相关信息的展示;
3、实现视频滑动上下切换效果;
肯定选择用原生组件video了,真是不用不知道,一用都是坑;
首先,组件的层级最高;编译器和真机呈现的效果完全不一样;
其次,相关需求要求很高,有些效果很难实现;
最后,组件真是太坑了,如有另一种选择,肯定不用它;
解决方案:
幸好微信提供了可以覆盖在原生组件的组件cover-view,这样能解决视频信息在组件表层的显示;
但是,cover-view又没有提供滑动事件,根本没法监听滑动事件;各种尝试后,选择了视频层级上裹一层canvas,可以发挥自己的能力去处理滑动监听了;
还有一个问题就是全屏播放问题,现在微信提供全局的顶部栏的自定义配置。但自定义配置实在是耗神费力,需要所有页面都自定义顶部栏;就暂时放弃了,显示的全屏;
幸好,下一个版本的微信将提供,单个页面的全屏配置;
好了,今天就先分享到这了,踩坑 填坑,真是一份吃力不讨好的过程;以后再贴git源码了,,,
小程序视频播放组件video的更多相关文章
- 微信小程序的组件总结
本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...
- 小程序 map组件问题 cover-view问题
使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...
- 微信小程序image组件binderror使用例子(对应html、js中的onerror)
官方文档 binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...
- 小程序web-view组件
不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件. 1,web-view这个组件是什么鬼? 官网的介绍: ...
- 小程序input组件获得焦点时placeholder内容有重影
这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- [转]小程序web-view组件
本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...
- 微信小程序input组件抖动及textarea组件光标错位解决方案
问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...
- 推荐3个小程序开源组件库——Vant、iView、ColorUI
推荐3个小程序开源组件库 在进行小程序开发时,经常会遇到编写组件方面的阻碍,这让我们花费大量的时间在页面以及 CSS 样式编写上.因此可以使用开源组件库,有些复杂的组件可以直接拿来使用,节省开发时间, ...
随机推荐
- swoole框架和其所涉及的协议
网络知识基础 OSI协议 :应用层.表示层.会话层.传输层.网络层.数据链路层.物理层 tcp通信 TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道(三次握手.四次挥手). ...
- 【C/C++】数组 & 指针
int main() { ]; ]; ][]; ]; ]; ]; ][]; cout << sizeof(a) << endl; cout << sizeof(pa ...
- ERP新人防坑指南
本文作为初入ERP行业的新人的防坑指南,讲解了一些常见犯的错,这样也少走一些弯路,如果你是老鸟,请绕过 :-) 本文关联的代码使用kotlin编写,请自行转换为c#.java等你熟悉的语言,表述的坑在 ...
- 队列添加对象后,所有都变成相同的(bug)
代码背景: 定义全局变量 private object currentObj=new object(); ;i<objectList.count;i++) { currentObj=object ...
- vbs 去掉字符串中的空格
今天在写自动化脚本时,需要把字符串中的空格替换成其他特殊字符,但字符间的空格个数又不确定,经过搜索,成功解决. 解决重点就是把每个空格字符串搜索出来,然后进行替换,主要用到space函数. strSt ...
- socket应用(vue、node.js、M站)
socket应用(vue.node.js.M站) 前言:我们在做一些项目的时候需要做到实时变化, 比如我们有时候有需求会要求我们做一个类似于聊天室的页面 比如有些时候我们对某些东西进行点赞和刷票,需要 ...
- PDF 补丁丁 0.6.0.3363 版发布(修复无法保存应用程序设置的问题)
本测试版修复了上一测试版无法保存应用程序设置的问题,以及导出导入信息文件的若干小问题.
- linq中分组查询而且获取每个分组中的第一条记录,数据用于分页绑定
LINQ分组取出第一条数据 Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: I ...
- Oracle入门知识
在客户端里PL/sql里面 记得用commint 回滚 所写得SQL语句才真的有效 如插入7千万个数据 没有执行commint 就等于没有 将数据真正的存入数据库服务器里面去 所以当其他前端链接上 ...
- perceptual loss
https://arxiv.org/abs/1603.08155 两个网络:image transfer网络和loss网络 image transfer网络: 将输入图片y通过映射f W (x)得到输 ...