关于小程序视频(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>
<video
id="myvideo"
src="http://7xuqg4.com1.z0.glb.clouddn.com/video/xiaozhan-ceshi.mp4"
controls
bindended="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();
}
},