关于微信小程序的video播放问题
需求:小程序首页有两个视频,视频标签上方覆盖本地图片一张;进入默认暂停,点击播放一个,另一个暂停。wxml部分:<view class="cp_video"><cover-imagesrc="/image/pink1.png" class="cpv_img" bindtap="video" data-id="video1"hidden="...
·
需求:小程序首页有两个视频,视频标签上方覆盖本地图片一张;进入默认暂停,点击播放一个,另一个暂停。
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();
},
更多推荐


所有评论(0)