小程序实现多视频连续播放

2018-06-05  本文已影响0人  比较笨的大笨钟

类似于微博视频播放的功能,简单写了一个小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()//播放视频

  }

})

上一篇下一篇

猜你喜欢

热点阅读