天天看点

android短视频列表自动播放,小程序实现多视频连续播放

类似于微博视频播放的功能,简单写了一个小demo,测试可以正常执行。功能是当点击一个视频播放完成后,自动加载下一个视频,当所有视频全部加载完成后,视频播放停止。

wxml:

android短视频列表自动播放,小程序实现多视频连续播放

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()//播放视频

}

})