美文网首页
小程序实现多视频连续播放

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

作者: 比较笨的大笨钟 | 来源:发表于2018-06-05 20:53 被阅读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()//播放视频

      }

    })

    相关文章

      网友评论

          本文标题:小程序实现多视频连续播放

          本文链接:https://www.haomeiwen.com/subject/kjimsftx.html