关于小程序视频(video)的一些总结
December 29, 2017
小程序中使用视频
类似视频这种原生组件,位于小程序的最上层,当页面滚动时,很有可能出现一些定位的元素,被视频组件覆盖,如下图
为了避免一些层级最高的元素覆盖掉原始样式,可以先隐藏视频,将一gif格式的图片代替,并辅助一播放图标,表示该位置是视频
<view class='video'><view class="controls {{isPlay ? 'hide' : 'show'}}"><image class="cover-image" src="https://images-manager.oss-cn-shanghai.aliyuncs.com/source.gif" /><view class="play" bindtap="play"><image class="img" src="../../static/images/play.png" /></view></view><videoid="myvideo"src="http://7xuqg4.com1.z0.glb.clouddn.com/video/xiaozhan-ceshi.mp4"controlsbindended="endHandler"hidden="{{!isPlay}}"bindpause="endHandler"></video></view>
在onLoad时获取视频的上下文环境
this.videoCtx = wx.createVideoContext('myvideo', this);
并且给该图标添加事件绑定,主要做两件事情,下图为播放时的状态
- 隐藏该图标和gif
- 播放视频
play() {this.setData({isPlay: true,});this.videoCtx.play();},
在视频的播放过程中,若出现用户滚动的操作或者视频已经播放完,再执行
- 停止视频播放
- 显示该图标和gif
stop() {this.videoCtx.pause();this.videoCtx.seek(0);},endHandler() {this.setData({isPlay: false,});this.pause();},onPageScroll() {if (this.data.isPlay) {this.stop();}},