小程序实现多视频连续播放
类似于微博视频播放的功能,简单写了一个小demo,测试可以正常执行。功能是当点击一个视频播放完成后,自动加载下一个视频,当所有视频全部加载完成后,视频播放停止。
wxml:
JS:
const app = getApp()
var that
var getData = require('../../../utils/util.js')
Page({
data: {
teachingVideoList: [],//视频集合
index: 1,//下标
src: 'https://cos.ap-beijing.myqcloud.com/teachingVideo/enterElook.mp4' //默认加载的第一个视频
},
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) { // 视频播放结束后执行的方法
var that = this
if (that.data.index == that.data.teachingVideoList.length-1) {
wx.showToast({
title: '已播放完成',
icon: 'loading',
duration: 2500,
mask: true,
})
that.setData({
index: 1
})
this.videoContext.pause() //暂停
}else{
getData.alertWait('播放下一个视频', that.videoPlay())
}
},
videoPlay: function () {
that = this
var videolLength = that.data.teachingVideoList.length;
that.setData({
index: that.data.index + 1,
src: that.data.teachingVideoList[that.data.index][1],
})
this.videoContext.autoplay =='true'//设置自动播放
this.videoContext.play()//播放视频
}
})