關於微信小程序的video播放問題

需求:小程序首頁有兩個視頻,視頻標籤上方覆蓋本地圖片一張;進入默認暫停,點擊播放一個,另一個暫停。
 

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();
  },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章