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

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

作者: 比较笨的大笨钟 | 来源:发表于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()//播放视频

  }

})

相关文章

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

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

  • 小程序音频播放笔记

    我要实现的是小程序内播放音频,并且支持退出小程序后仍能保持播放状态 音频播放 只在小程序内部播放,小程序关闭语音也...

  • 微信小程序多视频播放

    需求:播放某个视频,暂停其他正在播放的视频。 解决代码如下:

  • 小程序-视频播放

    小程序中视频播放,采用两个video进行切换的方案。如果设置了loop,那么在判定结束的时候(video组件触发e...

  • 【总结】2017.02.27

    2017.02.27 - 计划 hbx视频播放控制demo 小程序视频控制 - 实际完成 hbx视频播放控制dem...

  • iOS AVPlayer 实现后台连续播放视频

    最近接到一个需求,需要做一个在后台播放视频的功能。折腾了一下,最后总算完成了。因此写一篇文章,介绍下具体的实现步骤...

  • 小程序video组件遇到的坑(实现类似抖音视频播放的功能)

    昨天刚写了一个小程序多视频播放的demo,今天就遇着坑了...本来是想做成类似于抖音视频播放的那种模式,一个视频列...

  • AVPlayer使用封装

    AVPlayer使用 app集成了视频与音频播放功能,完成程序后总结下播放功能的实现。MBAAudioPlayer...

  • 小程序----video视频播放

    Video小程序播放视频的组件。 wx.createVideoContext(videoId, this)创建并返...

  • 小程序视频播放问题

    2018/12/18 小程序组件中原生控件层级最高,使用时会覆盖其他任何的组件 带来的问题:在内容页视频播放时,使...

网友评论

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

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