最近在做一个视频播放的功能,要求如下:

1、实现视频的全屏播放;

2、实现视频相关信息的展示;

3、实现视频滑动上下切换效果;

肯定选择用原生组件video了,真是不用不知道,一用都是坑;

首先,组件的层级最高;编译器和真机呈现的效果完全不一样;

其次,相关需求要求很高,有些效果很难实现;

最后,组件真是太坑了,如有另一种选择,肯定不用它;

解决方案:

幸好微信提供了可以覆盖在原生组件的组件cover-view,这样能解决视频信息在组件表层的显示;

但是,cover-view又没有提供滑动事件,根本没法监听滑动事件;各种尝试后,选择了视频层级上裹一层canvas,可以发挥自己的能力去处理滑动监听了;

还有一个问题就是全屏播放问题,现在微信提供全局的顶部栏的自定义配置。但自定义配置实在是耗神费力,需要所有页面都自定义顶部栏;就暂时放弃了,显示的全屏;

幸好,下一个版本的微信将提供,单个页面的全屏配置;

好了,今天就先分享到这了,踩坑 填坑,真是一份吃力不讨好的过程;以后再贴git源码了,,,

小程序视频播放组件video的更多相关文章

  1. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  2. 小程序 map组件问题 cover-view问题

    使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canva ...

  3. 微信小程序image组件binderror使用例子(对应html、js中的onerror)

    官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong' ...

  4. 小程序web-view组件

    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍: ...

  5. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  6. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  7. [转]小程序web-view组件

    本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...

  8. 微信小程序input组件抖动及textarea组件光标错位解决方案

    问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/& ...

  9. 推荐3个小程序开源组件库——Vant、iView、ColorUI

    推荐3个小程序开源组件库 在进行小程序开发时,经常会遇到编写组件方面的阻碍,这让我们花费大量的时间在页面以及 CSS 样式编写上.因此可以使用开源组件库,有些复杂的组件可以直接拿来使用,节省开发时间, ...

随机推荐

  1. oralce 常用sql

    查看表空间及其数据文件 SELECT * FROM dba_data_files; 查看用户下的表SELECT * FROM user_tables; 查看用户表的注释SELECT * FROM us ...

  2. springcloud-hystrix断路器对微服务的容错处理

    使用Hystrix实现微服务的容错处理 1.实现容错的手段 如果服务提供者响应的速度特别慢,那么消费者对提供者的请求就会强制等待,直到提供者响应或者超时.在高负载的情况下,如果不做任何处理,此类问题可 ...

  3. element-ui <el-date-picker> 回显格式 yyyy-MM-dd 传值格式 yyyyMMddHHmmss

    <template> <!-- 需求:使用 <el-date-picker> 日期插件 前端显示2018-10-22 后台需要传时间戳,对这个日期插件不熟悉,当时搞了好长 ...

  4. javaEE完整体系结构

    学习之前了解熟悉一下javaEE的完整体系结构会更有助于理解 https://segmentfault.com/a/1190000007090110

  5. js实现农历时间代码

    var dNow = new Date(); var CalendarData=new Array(100); var madd=new Array(12); var tgString="甲 ...

  6. linux 虚拟机配置固定ip

    参考这边博客: https://blog.csdn.net/u014466635/article/details/80284792 但是这个有个小问题,就是没有配置dns,导致连不上公网 /etc/s ...

  7. 洛谷P2886 [USACO07NOV]牛继电器Cow Relays

    题意很简单,给一张图,把基本的求起点到终点最短路改成求经过k条边的最短路. 求最短路常用的算法是dijkstra,SPFA,还有floyd. 考虑floyd的过程: c[i][j]=min(c[i][ ...

  8. 大数据面试题——如何找出访问最多的IP

    问题描述: 现有海量日志数据保存在一个超大的文件中,该文件无法直接存入内存,要求从 中提取某天访问BD次数最多的IP 分析解读: 由于这个题目只关心某一天访问次数最多的IP,因此可以首先对文件进行一次 ...

  9. [图形学] B样条曲线 - 原理和C++实现的演示程序(附源码)

    http://blog.csdn.net/mahabharata_/article/details/71856907 大二的时候,曾受老师所托,用C++而不是OpenGL去写B样条曲线的教学程序.时隔 ...

  10. Mad Libs 游戏

    name1=input('请输入一个名字:') name2=input('再输入一个名字:') print('丑不拉几的{}被美丽的{}给迷得神魂颠倒'.format(name1,name2)) in ...