转自:https://idig8.com/2018/09/23/xiaochengxujavashizhanxiaochengxushipinbofangdeshihoushengmingzhouqidekongzhi55/当播放单个视频时,点击搜索,视频还在后台继续播放,这是有问题,需要通过生命周期的方式来控制,当跳转页面时,视频暂停播放,视频返回后继续播放。源码https://github.com/limingios/wxProgram.git 中No.15官网js的方式控制视频VideoContext>https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html 代码实现>给video增加id,然后onload获取VideoContext,onshow进行play,onHide进行pause。videoInfo.wxml<view style=’width:100%;height:100%’> <video id=”myVideo” src=”https://127.0.0.1:8081/180831CF2TS25MNC/4e0ca373-6520-45b9-a1a6-7ee8429dc5d8.mp4″ muted='{{false}}’ controls='{{false}}’ autoplay='{{true}}’ loop='{{true}}’ enable-progress-gesture='{{false}}’ style=’width:100%;height:100%;’ objectFit='{{cover}}’ > <cover-view class=’container’> <!– 上传视频 –> <cover-image src=’../../resource/images/camera.png’ style=’width:50rpx;height:50rpx;’ bindtap=’upload’></cover-image> <!– 搜索按钮 –> <cover-image src=’../../resource/images/search.png’ style=’width:45rpx;height:45rpx;’ bindtap=’showSearch’></cover-image> </cover-view><cover-view class=’container-me’> <!– 头像 –> <cover-image class=”face” src='{{serverUrl}}{{publisher.faceImage}}’ bindtap=’showPublisher’></cover-image> <!– 喜欢收藏按钮 –> <block wx:if=”{{userLikeVideo}}”> <cover-image class=”size-me” src=’../../resource/images/like.png’ style=’margin-top:30rpx;’ bindtap=’likeVideoOrNot’></cover-image> </block> <block wx:else> <cover-image class=”size-me” src=’ ../../resource/images/unlike.png’ style=’margin-top:30rpx;’ bindtap=’likeVideoOrNot’></cover-image> </block> <!– 评论按钮 –> <cover-image class=”size-me” src=’../../resource/images/comments.png’ style=’margin-top:30rpx;’ bindtap=’leaveComment’></cover-image> <!– 分享按钮 –> <cover-image class=”size-me” src=’../../resource/images/share.png’ style=’margin-top:30rpx;’ bindtap=’shareMe’></cover-image> </cover-view> <cover-view class=’container-words’> <cover-view>@{{publisher.nickname}}</cover-view> <cover-view class=’video-desc’>{{videoInfo.videoDesc}}</cover-view> </cover-view> <cover-view class=’container-bottom’> <!– 首页按钮 –> <cover-image class=” src=’../../resource/images/index.png’ class=”size-bottom” bindtap=’showIndex’></cover-image> <!– 我的按钮 –> <cover-image class=” src=’../../resource/images/mine.png’ class=”size-bottom” bindtap=’showMine’></cover-image> </cover-view> </video></view>videoInfo.jsPage({ data: { cover:’cover’, videoContext:”” }, showSearch:function(){ wx.navigateTo({ url: ‘../videoSearch/videoSearch’, }) }, onLoad:function(){ var me = this; me.videoContext = wx.createVideoContext(‘myVideo’, me); }, onShow:function(){ var me = this; me.videoContext.play(); }, onHide:function(){ var me = this; me.videoContext.pause(); }})PS:小程序开发很类似app开发,了解生命周期,可以很方便的完成一些功能的开发。微信小程序
「小程序JAVA实战」小程序视频播放的时候生命周期的控制(56)
相关推荐
如何实现线上卖断货?私域流量与公域流量哪个重要?15013808327
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务