需求:小程序首页有两个视频,视频标签上方覆盖本地图片一张;进入默认暂停,点击播放一个,另一个暂停。
 

wxml部分:

 <view class="cp_video">
       <cover-image  src="/image/pink1.png" class="cpv_img" bindtap="video" data-id="video1"   hidden="{{video1}}" ></cover-image>
        <video class="cpv_v"  id="video1" src="视频链接" enable-danmu   controls></video>
      </view>
      <view class="cp_video">
          <cover-image  src="/image/pink2.png" class="cpv_img" bindtap="video" data-id="video2"  hidden="{{video2}}" ></cover-image>
        <video class="cpv_v"   id="video2" src="视频链接" enable-danmu  controls></video>
      </view>

js初始默认:video1: false,video2: false,

问题:一开始我并不知道怎么设定视频的暂停与播放,误认为使用autoplay;但是这种在ios上面没有问题,在安卓上面会失效。安卓上初始进入视频就会默认同时播放。 

后来经过网上的查找,了解到可以用到:https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html

我需要使用的是上面圈起来的几个方法。

示例:

var videoContext = wx.createVideoContext(‘video标签的id’)

videoContext.play();

js部分:

 video(e) {
    var that = this;
    var _index = e.currentTarget.dataset.id;
    var a;
    if (_index == 'video1') {
      a = 'video2'
      that.setData({
        video1: true,
        video2: false
      });
    } else {
      a = 'video1'
      that.setData({
        video2: true,
        video1: false
      })
    }
    //停止正在播放的视频
    var videoContextPrev = wx.createVideoContext(a)
    videoContextPrev.stop();
    videoContextPrev.pause();
    //将点击视频进行播放
    var videoContext = wx.createVideoContext(_index)
    videoContext.play();
  },

 

Logo

一站式 AI 云服务平台

更多推荐