昨天刚写了一个小程序多视频播放的demo，今天就遇着坑了...本来是想做成类似于抖音视频播放的那种模式，一个视频列表，点击视频进去可以实现上拉下滑加载视频的效果。
但小程序的video组件监听不了上拉下滑的事件。我灵光一闪，加一个scroll-view不就得了，但是小程序API文档里关于video组件的最后三行直接把我的想法送去见上帝了。它是这么说的：
tip: video 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 video 组件。
tip: css 动画对 video 组件无效。
但我依旧贼心不死，想做个页面嵌套来控制video，最终还是以失败告终。小程序貌似无法控制组件之间的层级关系。所以我最终用onPullDownRefresh来控制下拉刷新，上拉加载我实在是没想到好的方法。退而求其次，我用上次写的视频播放完后自动加载下一个视频的功能来代替了。如果哪位大神有好的想法还请不吝赐教~先贴下我写的代码。
wxml:
js:
const app = getApp()
var that
var getData = require('../../../utils/util.js')
Page({
data: {
teachingVideoList:[],//视频集合
src: '', //视频地址
videoId: 0,//视频ID
videoFlag: true,
videoPlayFlag:false
},
onLoad: function () {
that = this
wx.request({
url: app.data.serverUrl + 'upload_queryTeachingVideo.action',
success: function (res) {
that.setData({
teachingVideoList: res.data.teachingVideoList,
})
}
})
},
onReady: function (res) {
this.videoContext = wx.createVideoContext('myVideo')
},
//视频播放结束触发的事件,视频播放结束播放下一个视频
videoEnd: function (res) {
that = this
that.setData({
videoId: res.currentTarget.dataset.videoid+1
})
if (that.data.videoId == that.data.teachingVideoList.length) {
wx.showToast({
title: '已播放完成',
icon: 'loading',
duration: 2500,
mask: true,
})
this.videoContext.pause()
} else {
getData.alertWait('播放下一个视频', that.playVideo(that.data.videoId))
}
},
//播放当前视频
playVideo: function (videoId) {
wx.request({
url: app.data.serverUrl + 'upload_videoUrl.action',
data: {
id: videoId
},
success: function (res) {
that.setData({
src: res.data.videoUrl,
videoId: videoId,
videoFlag: false,
videoPlayFlag: true
})
}
})
},
//开始播放视频触发的事件
startPlayVideo: function (res) {
that = this
var videoId = res.currentTarget.dataset.videoid
that.playVideo(videoId);
},
//下拉播放上一个视频
onPullDownRefresh: function () {
that = this
if (that.data.videoId == 1) {
wx.showToast({
title: '没有上一个视频了',
icon: 'loading',
duration: 2500,
masmask: true,
})
} else {
that.setData({
videoId: that.data.videoId - 1,
videoFlag: false,
videoPlayFlag: true
})
that.playVideo(that.data.videoId);
}
},
//返回
upperPage: function(){
that.setData({
videoFlag: true,
videoPlayFlag: false
})
}
})
json:
当视频全屏播放结束的时候，在真机测试退出全屏的体验感并不好，所以设计成当点击视频播放的时候在另一个页面展示视频。如有不足之处，还请多多指教哦~