微信小程序多个视频播放器

大致思路就是，wx:for="{{ list }}"下两个view，一个视频video，另一个封面image（客户需求，要可以自定义封面）。
主要控制变量是playIndex，当点击封面时赋予当前点击的e.currentTarget.id，而id="{{ index }}"（index是微信wx:for自带的）。
在video加个wx:if，playIndex == index是判断条件，也就是说点击封面，对应的video的wx:if=true会渲染。
这时最好设置一个延迟来执行videoContext.play()，因为video渲染需要时间，无延迟的话还没渲染完play()就执行了。

WXML

<view wx:for="{{list}}">

    <view>

       <video id="index{{index}}" src="{{item.video_url}}" wx:if="{{playIndex==index}}"></video>

    </view>

    <view id="{{index}}" class="cover" style="display: {{playIndex==index?'none':'block'}};" bindtap="videoPlay">

      <image class="coverImg" src="{{item.poster}}" mode="scaleToFill">

        <image class="playImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524569209313&di=ed6fbf799d057b1e2b4047276d35fc76&imgtype=0&src=http%3A%2F%2Fpic.orsoon.com%2Fuploads%2Fallimg%2F1601%2F24-1601021621070-L.png" mode="scaleToFill"></image>

      </image>

    </view>

</view>

WXSS

video{width: 100%;}

.coverImg{position:relative;width: 100%;}

.playImg{position: absolute;top: 50%;left: 50%;width: 64rpx;height: 64rpx;}

// pages/video/video.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    list: [

      { isPlaying: false, type: 1, title: "历史“", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

      { isPlaying: false, title: "新疆", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

      { isPlaying: false, title: "朝鲜", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

      { isPlaying: false, title: "会议", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

      { isPlaying: false, title: "万里", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

      { isPlaying: false, title: "自治区", poster: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1525153967&di=3191960263be63b5b5e74d88f3bb5f80&imgtype=jpg&er=1&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2F32afc2a2c9b949a5e936b1a48a6f516744636211.jpg', text: "撒可富杀立刻发水立方索拉卡附近撒联发科吉林省大开发沙龙东方科技奥斯发离开家啊", video_url: 'http://tbm.alicdn.com/Uob6TqgDJuggjUaP6bv/NNtoO48LH9fensAkefH%40%40sdregop.mp4' },

    ]

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  },

  // 点击cover播放，其它视频结束

  videoPlay: function (e) {

    var length = this.data.list.length

    var id = e.currentTarget.id

    if (!this.data.playIndex) { // 没有播放时播放视频

      this.setData({

        playIndex: id

      })

      var videoContext = wx.createVideoContext(['index', id].join(''))

      videoContext.play()

    } else {                    // 有播放时先将prev暂停到0s，再播放当前点击的current

      var videoContextPrev = wx.createVideoContext(['index', this.data.playIndex].join(''))

      videoContextPrev.seek(0)

      videoContextPrev.pause()

      this.setData({

        playIndex: id

      })

      var videoContextCurrent = wx.createVideoContext(['index', this.data.playIndex].join(''))

      videoContextCurrent.play()

    }

  }

})

巴特西

微信小程序多个视频播放器

最新文章

热门文章

巴特西

微信小程序 多个视频播放器

最新文章

热门文章

微信小程序多个视频播放器