内容简介:当播放单个视频时,点击搜索,视频还在后台继续播放,这是有问题,需要通过生命周期的方式来控制,当跳转页面时,视频暂停播放,视频返回后继续播放。源码https://github.com/limingios/wxProgram.git 中No.15videoInfo.wxml
当播放单个视频时,点击搜索,视频还在后台继续播放,这是有问题,需要通过生命周期的方式来控制,当跳转页面时,视频暂停播放,视频返回后继续播放。源码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.js
Page({ 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开发,了解生命周期,可以很方便的完成一些功能的开发。
>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!
>>原文链接地址:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 「小程序JAVA实战」小程序搜索功能(54)
- 「小程序JAVA实战」小程序视频封面处理(47)
- 「小程序JAVA实战」小程序开源搜索组件(52)
- 「小程序JAVA实战」小程序的关注功能(64)
- 「小程序JAVA实战」小程序注册界面的开发(29)
- 「小程序JAVA实战」小程序数据缓存API(53)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入浅出数据分析
Michael Milton / 李芳 / 电子工业出版社 / 2009 / 88.00元
《深入浅出数据分析》以类似“章回小说”的活泼形式,生动地向读者展现优秀的数据分析人员应知应会的技术:数据分析基本步骤、实验方法、最优化方法、假设检验方法、贝叶斯统计方法、主观概率法、启发法、直方图法、回归法、误差处理、相关数据库、数据整理技巧;正文以后,意犹未尽地以三篇附录介绍数据分析十大要务、R工具及ToolPak工具,在充分展现目标知识以外,为读者搭建了走向深入研究的桥梁。 本书构思跌宕......一起来看看 《深入浅出数据分析》 这本书的介绍吧!