wxml
<view class="page-box">
<scroll-view scroll-y="true" class='infoWord' style="height:calc(100% - {{statusBarHeight}}px - 88rpx - 32rpx); ">
<view class='video-box' wx:for='{{videoData}}' wx:key='index'>
<view class='title'>{{item.title}}</view>
//custom-cache="{{false}}" 解决iOS兼容问题,列表在加载时部分无法播放
<video id="myVideo" custom-cache="{{false}}" src="{{urlImg + item.videoSrc}}" binderror="videoErrorCallback" bindplay='playVideo' show-center-play-btn='{{false}}' show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture' id="video{{index}}" ></video>
</view>
</scroll-view>
</view>
js
data: {
headText: '',
statusBarHeight: getApp().globalData.statusBarHeight,
videoData: [
{
title: '',
videoSrc: '无无.mp4'
},
{
title: '',
videoSrc: '谢谢.mp4'
},
]
,
urlImg: urlImg,
indexCurrent: null,
},
//实现同一时间只能播放一个视频,不能同一时间播放多个视频
playVideo(e) {
var curIdx = e.currentTarget.id;
// 没有播放时播放视频
// console.log(curIdx)
if (!this.data.indexCurrent) {
this.setData({
indexCurrent: curIdx
})
var videoContext = wx.createVideoContext(curIdx, this) //这里对应的视频id
videoContext.play()
} else { // 有播放时先将prev暂停,再播放当前点击的current
var videoContextPrev = wx.createVideoContext(this.data.indexCurrent)//this是在自定义组件下,当前组件实例的this,以操作组件内 video 组件(在自定义组件中药加上this,如果是普通页面即不需要加)
if (this.data.indexCurrent != curIdx) {
console.log(123)
videoContextPrev.pause()
this.setData({
indexCurrent: curIdx
})
var videoContextCurrent = wx.createVideoContext(curIdx, this)
videoContextCurrent.play()
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onLoad: function (options) {
let data = JSON.parse(options.data)
this.setData({
headText: data.title,
videoData: data.videoData
})
},
版权声明:本文为Cinderellahh92原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。