12月29, 2017

关于小程序视频(video)的一些总结

小程序中使用视频

类似视频这种原生组件,位于小程序的最上层,当页面滚动时,很有可能出现一些定位的元素,被视频组件覆盖,如下图

为了避免一些层级最高的元素覆盖掉原始样式,可以先隐藏视频,将一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();
    }
},

本文链接:https://beacelee.com/post/miniprogram-video.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。