Beace Lee

Beace Blog

Written by Beace Lee who lives and works in China building useful things. You should follow him on Twitter

关于小程序视频(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();
	}
},