需求:小程序首頁有兩個視頻,視頻標籤上方覆蓋本地圖片一張;進入默認暫停,點擊播放一個,另一個暫停。
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();
},