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
    }
  • 相关阅读:
    Win10使用VMware虚拟机安装ubuntu
    算法资源清单
    JAVA Synchronized (三) volatile 与 synchronized 的比较
    JAVA Synchronized (二)
    Java多线程:线程状态以及wait(), notify(), notifyAll()
    Java中断机制
    Java throw与throws
    Java(Android)线程池
    JAVA interrupte中断线程的真正用途
    Java 守护线程
  • 原文地址:https://www.cnblogs.com/wanf/p/11149495.html
Copyright © 2011-2022 走看看