zoukankan      html  css  js  c++  java
  • 微信小程序多video播放暂停问题

    <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{flag}}" interval="5000" duration="{{duration}}" current="{{indexCurrent}}" bindchange='onSlideChangeEnd' id='{{indexCurrent}}'>   
        <block wx:for="{{videos}}" wx:for-index="index" wx:key="index">
          <swiper-item class='video-item'>
            <video id="myVideo{{index}}" src='{{item}}' controls="{{controls}}" custom-cache="{{cache}}" object-fit='cover' show-center-play-btn="{{playBtn}}" autoplay='{{true}}' wx:if='{{index==indexCurrent}}'></video>
    
            <image class='video-play-btn' wx:if='{{index!=indexCurrent}}' mode='widthFix' data-index='{{index}}' bindtap='videoPlay' src='/pages/images/bofang.png'></image>
          </swiper-item>
        </block>
     </swiper>
    //获取应用实例
    var app = getApp();
    
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        indicatorDots: true,
        controls: true,
        playBtn: false,
        duration: 1000,
        cache: false,
        indexCurrent: null,
        videos:['.....','....','.....']
      },
      videoPlay: function (e) {
        var curIdx = e.currentTarget.dataset.index;
          // 没有播放时播放视频
          if (!this.data.indexCurrent) {
            this.setData({
              indexCurrent: curIdx
            })
            var videoContext = wx.createVideoContext('myVideo' + curIdx) //这里对应的视频id
            videoContext.play()
          } else { // 有播放时先将prev暂停,再播放当前点击的current
            var videoContextPrev = wx.createVideoContext('myVideo' + this.data.indexCurrent)
            if (this.data.indexCurrent != curIdx) {
              videoContextPrev.pause()
            }
            this.setData({
              indexCurrent: curIdx
            })
            var videoContextCurrent = wx.createVideoContext('myVideo' + curIdx)
            videoContextCurrent.play()
          }
        }
      }
    })
    .video-item{
      position: relative;
       100%;
      height: 420rpx;
    }
    .video-item .video-play-btn {
      position: absolute;
       100rpx;
      height: 100rpx;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto
    }
  • 相关阅读:
    18.9.22 noip模拟赛
    POJ 2299 Ultra-QuickSort
    美团2018年CodeM大赛-初赛B轮 B 配送(最短路)
    Wannafly挑战赛18 E 极差(线段树、单调栈)
    Foj 2299 Prefix(AC自动机、DP)
    求独立矩形个数
    Zoj 3777 Problem Arrangement
    Luogu 2444 [POI2000]病毒 & Zoj 3784
    [ZJOI2007]Hide 捉迷藏
    双联通分量学习笔记
  • 原文地址:https://www.cnblogs.com/wanf/p/11149495.html
Copyright © 2011-2022 走看看