网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 推广营销 » 正文

微信小程序实现多视频video采坑上下滑动视频

2019-8-3 22:57:8 | 作者:老铁SEO | 0个评论 | 人浏览

  第一次:relative布局,使用translateY来实现实时上滑。直接借鉴H5的思路。

  每次向下只多加载一个视频,每次只保持页面存储三个屏幕的内容,也就是三个视频,向上滑动一次,再渲染一个视频。监听手势滑动,改变当前可视区域的translateY。嗯,可以的。

  然后第一步核心流程就卡住了,手势touchmove,然后改变translateY非常卡,性能很好的手机,都能看到卡顿现象,差的手机更不用说,set-data本来就是异步的,实时操作set-data太频繁,小程序处理性能完全比不上H5的webview。

  那既然是是滚动交互的逻辑层和视图层交互性能差,那我们就要规避这个交互,于是想试试scroll-view,这个可是系统滚动的,不需要Js参与。

  每次当前视频区域内,上滑只有一个视频,下滑也只有一个视频,页面上只有三个视频。手势上滑下滑都非常流畅,简直perfect。

  但是在可视区域只有一个视频,用户滑动距离短,松手的时候视频可是要自动滑下去归位呀,监听pageScroll停止之后,手动判断滚动距离,然后设置scroll-top,但是设置完之后页面明显延迟了1s,滚动完之后,停留了1s钟然后才归位,体验……很差。

  既然scroll-view不能使用video,导致设置值这么慢,swiper是系统支持滚动和归位呢,多好啊。那我是否可以用swiper来试试呢。

  在swiper-item里面嵌入video之后,video是最高层,并不能触发swiper的滑动事件,swiper的滑动根本不生效,监听video的滑动,去更新swiper,那问题一样,卡卡卡。

  来去N回合,还是放弃了实时滑动,看来小程序中要如H5一样,做个好的滑屏不容易呀~

  1、页面使用absolute布局,监听视频的touchmove事件,然后在touchend之后,判断是否翻页,如果要翻页,修改animation的Y位移值。

  video,input是最高层,且input覆盖不了video。于是采用在评论页面将视频缩小到顶部。中间用input框,底部用view渲染的评论信息。这样解决了输入框和video的层级问题,更好的解决了cover-view评论渲染慢的问题。

  未播放的视频,只能pause,不能stop,否则某些手机无法再次play了。

  当弹出键盘的时候,需要隐藏上一个视频,即让left:-200%,否则部分手机上会错位,播放视频和显示不一致。

  4、视频未播放,也不能隐藏,或者left:-200%这样类似H5的处理方式,否则闪烁明显。

  增加videoLock,防止手势不停的翻页,否则部分手机播放异常,一直加载中,本身也没必要有刷刷刷的快速不停翻屏的需求。

  下一个视频渲染上去的话,如果只是渲染,不去play(),那么部分手机无法播放,只会一直转圈,播放不了,所以需要先muted播放1s,然后timeupdate监听暂停。

  这个是大坑,本身渲染性能差,你还得滞后video渲染,所以每次滑屏的时候,需要设置重新渲染一下才可以。

  监听事件需要放在video和,cover-view上,因为部分手机的video是无法响应touch事件,所以双重保护。

  监听页面滑动动作之后,然后决定视频是否需要位移。当手势滑动之后,需要移动视频的时候,就设置animation,让页面移动到想要的位置。

  需要动态删除翻过的视频。如下是翻一页就删除上一个视频,开始我是保存上一个视频。实现方式一样。

  监听视频的timeouupdate,去更新播放视频的进度。totalIndex是所有查询出来的视频的索引。对应每一个视频的节点的id。这里的暂停视频,不能stop,我这里注释了,原因是stop之后,iphone8 6.7.1手机无法play,会一直停留在加载状态。

  这里使用muted和autoplay,是因为xxx手机在滑动之后,想要播放视频,用代码无法播放。需要先load,让静音播放一下,然后被timeupdate暂停。

  页面截图:好吧,截图被压缩了,这个csdn处理不好,要按比例缩小图片啊~

  不少朋友对短视频,上下滑动播放视频效果比较比较感兴趣,今天看看这个案例。1、效果图:讲下大概思路,使用Recycleview配合自定义LinearLayoutManage......博文来自:何俊林

  项目需求:滑动屏幕,切换短视频,实现类似抖音等短视频平台的视频切换效果最终效果图:滑动屏幕自动加载,切换视频和产品图片分析:video是原生标签,层级太高,在全屏的情况下,其他组件均会被遮挡,所幸小...博文来自:优倍素材网技术总结

  微信小程序video循环列表播放当前只能播放一个视频video组件的几个bug需要注意的地方:video组件不能放在scroll-view中使用 video层级最高 列表循环中,每点击一个播放按...博文来自:的博客

  用户下滑,加载新的视频播放,上滑看历史页面。1、布局,   手势下上滑要整体上下滑动,滑动距离不够,需要自动回退到初始播放页面,滑动大于最小距离,则需要翻页。   使用lt;ulg...博文

  前言将babel捧作前端一个划时代的工具一定也不为过,它的出现让许多程序员幸福地用上了es6新语法。但你就这么放心地让babel跑在外网?反正我是不放心,我就曾经过被坑过,于是萌生了研究babel代码...博文来自:小平果的欢乐谷

  video小程序中的video组件是原生组件,默认宽度300px、高度225px,可通过wxss设置宽高。其中src属性默认支持MP4格式,但是实际上还可以支持其他格式。属性主要有:src:要播放视频...博文来自:weixin_33889245的博客

  今天写小程序时候遇到个坑,就是使用vedio组件时候,一开始没想好,本以为腾讯视频会有类似于优酷之类的提供分享外链功能,结果进去一看,只能复制视频网址,本来想着要么F12获取地址吧,麻烦点就麻烦点,但...博文来自:gzx0713的博客

  微信小程序之多媒体实例-播放器播放音频和视频的功能也是小程序的特色,API也十分简单,本节我们一起来开发一个播放网络音乐的功能。API如下:属性名类型默认值说明idStringaudio组件的唯一标识...博文来自:weixin_33826609的博客

  最近在搞小程序,需要播放视频,但是视频封面得自定义图片。查找资料时候发现好多实现不了,要么就是看不懂。前段时间做了一个demo没注意真机测试,开发工具可以实现,但是手机上不显示图片,如果显示图片的话就...博文来自:zk的博客

  我叫阿文,我是小程序学习的新手,现在有个问题向csdn大神请教 我的需求是这样的: 目前大概有几十个小视频想通过小程序播放,这几十个小视频有变化的需求。。 用户点击小程序,会弹出视频的界面,然后点击那论坛

  video如果用fixed属性固定在页面顶部,在手机上滑动时,视频会跟着滚动,并且会在顶部留下一个黑匣子。这里我们不用fixed属性,而是把页面分为两部分,上部分为视频,下部分为滚动区域,滚动区域用s...博文来自:weixin_41726565的博客

  小程序真是一步一坑,最近在做一个视频播放组件,需要一些视频的url地址,结果发现直接拿腾讯视频中url根本不行,在网上看了好多帖子说的也不是特别详细,结果自己用了一天时间研究整理了一下,写了一个获取可...博文来自:的博客

  2019/3/15更新根据下载评论区老哥的评论,本方法可能已经被屏蔽。大家可以继续尝试本方法,但不推荐下载组件。具体做法可以参考这位博文来自:SpringWave的博客

  小程序的视频组件没有隐藏播放按钮的属性,但是看了爱奇艺的小程序,发现他们可以自定义播放按钮,这就比较奇怪了,官方不提供,还能实现,一定有办法,于是想了很久,突然想到,可以在video组件里面嵌套两个c...博文来自:u014477038的专栏

  微信小程序例子——使用video组件播放视频博文来自:FutrueJet的博客

  第1部分:大至描述用微信小程序来发起直播(推流); 用户即可以通过微信直接观看,也可以通过PC端web浏览器观看或通过手机浏览器观看。第2部分:提示说明图1,是小程序界面方面的截图(P1图中:截图1为...博文来自:阿酷tony

  很多应用里有个视频播放的控制效果,就是页面滚动时,只有全部显示在窗口里的最上面一个自动播放,其他都停止播放。今天客户也要求在我们的项目里使用这个效果,于是写了一个脚本,现在贴出来给大家参考一下,对比网...博文来自:丰云 之 薪火

  video视频。该组件是原生组件,使用时请注意相关限制。默认宽度300px、高度225px,可通过wxss设置宽高。例如:效果展示代码index.wxmllt;!--src要播放视频的资源地...博文来自:钢丝球 M.Siebel

  电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath文档写的有点问题。主要属性:wx...博文来自:顺子_RTFSC的专栏

  最近微信小程序的发展势头很火,各大公司开始重视这一块,很多新手看文档可能觉得不是特别容易理解(包括我),所以闲来无事整理了几个小程序的视频教程分享给大家,如果链接失效了可以给我留言。极客学院小程序视频...博文来自:王光

  微信小程序video控件的使用微信小程序video控件的使用一、简介二、属性三、相关实现api1、wx.createVideoContext2、videoContext对象四、代码实现实现效果,如下图...博文来自:hacjy

  把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣?果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看.微信小程序开发之录音机音频播放动画(真机可用)先上gif:再上几张图:1.视频播...博文来自:大灰狼的小绵羊哥哥的博客

  视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的重要属性:wxml点击显示视频组件...博文来自:顺子_RTFSC的专栏

  自己看微信小程序开发时的一些记录分享。微信小程序中提供了一个video标签用于视频。已经为我们封装好了视频播放必须的多数功能,包括:暂停/开始,进度条,拖拽进度条,弹幕,全屏播放。使用时需要编辑wxm...博文来自:lzm150的博客

  微信小程序开发之视频播放器带弹幕Video弹幕颜色自定义(有图有源码)博文来自:编程小石头

  步骤:1.,登录并且注册账号2.找到对象储存,点击立即添加3.新建存储空间4.点击创建好的存储空间。找到内容管理。点击文件上传5.上传成功后,复制文件外链6...博文来自:shaisuanqin4706的博客

  popper小P微信小程序如何播放腾讯视频?1.背景因为当时需要做视频播放,后台存放视频文件又不现实。所以,做了一个能解析腾讯视频地址的并播放视频的小程序。2.介绍小程序里的解析腾讯视频地址的代码是参...博文来自:飞翔的熊blabla

  最近版本迭代中的需求里有这么一条:视频详情页面,页面上下滑实现视频上一个/下一个的切换拿到这个需求,我的思路有大致以下几种方案实现:1、使用scroll-view或者swiper实现切换分析:由于页面...博文来自:weixin_34212762的博客

  微信小程序开发交流承接微信小程序开发。扫码加微信。实现的功能:微信小程序视频组件添加图片封面,点击图片播放视频,点击下一个视频的封面图自动停止播放当前视频并播放点击的视频。效果...博文来自:a_靖的博客

  视频播放组件与图片加载组件也没啥差别,使用起来也没啥注意的重要属性:.wxml页面    获取视频  ...博文来自:han_cui的博客

  videoUIvideoUI视频切换播放和全屏播放微信小程序解决痛点:解决了viode自动下载的bug加快页面加载速度,为用户节省流量视频切换播放解决视频缓存中卡住的问题腾讯给出的方案是:custom...博文

  自从有了微信小程序,平均每天打开微信的次数在急剧增加,因为微信小程序,无需下载,无需安装,不占手机内存,却还有和手机APP同样强大的功能,让很多人受益。以下是我手机里4个无敌好用的微信小程序,用了保证...博文来自:weixin_34129145的博客

  (1)mp4视频用video组件播放会卡顿、绿屏,尤其是在快进、拖动时间条时.在video组件上,试试加个custom-cache=”{{false}}”属性,可以完美解决卡顿、绿屏的现象(2)mp4...博文来自:yangshuolll的专栏

  在小程序内使用了video视频标签,底部再加上一个悬浮的Btn按钮或是页面的中间弹窗,在页面上下滑动的时候,由于video原生组件的层级太高,会把悬浮(弹窗)给覆盖掉。像video这种原生组件层级太高...博文来自:潇湘夜雨

  前言:最近的任务是实现多屏互动弹幕系统,小程序自带danmu-list,省去了很多工作,也抱着顺便玩一玩小程序的心态,选择了小程序开发。网上很多例子都是无后台版本的弹幕实现,由于项目要求,需要显示以前...博文来自:m0_37723587的博客

  很多人在做linux课程设计的时候,用的linux虚拟机与外面的系统ping不通,或者虚拟机里面上不了网,这个主要是与系统的默认设置有关,下面让我帮你们解决这个问题吧1.首先打开虚拟机的  “编辑〉虚...博文来自:云淡风轻的博客

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:小程序视频  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。