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
    }
  • 相关阅读:
    从Malvar的论文与两通道QMF设计原理到Speex 与 ISAC中的QMF使用
    转:薪酬与GDP
    转:A PitchEnergy Quantizer for Codec2
    韩国JoonHyuk Chang DSP Lab 专家
    Audio Codec : MPEG2 AAC 反量化模块
    VOIP Codec 三剑客之 SILK (1) 介绍
    CELT 视频PPT介绍
    HEAAC专利
    关于变换编码算法的(Blocking artifacts)和(Ringing artifacts)(一)
    转:免费国际长途 热门应用Line发布中文版
  • 原文地址:https://www.cnblogs.com/wanf/p/11149495.html
Copyright © 2011-2022 走看看