zoukankan      html  css  js  c++  java
  • 小程序播放当前视频,其他所有视频暂停

    原理:1.点击当前视频,先判断是否有视频正在播放,如果没有,立即播放,如果有,则暂停其他视频,再播放当前视频

    data: {
        indexCurrent: null,
      },
    methods: {
        // 只播放一个视频,其他视频暂停
        video_play(e) {
          var curIdx = e.currentTarget.id;
          // 没有播放时播放视频
          // console.log(curIdx)
          if (!this.data.indexCurrent) {
            this.setData({
              indexCurrent: curIdx
            })
            var videoContext = wx.createVideoContext(curIdx, this) //这里对应的视频id
            videoContext.play()
          } else { // 有播放时先将prev暂停,再播放当前点击的current
            var videoContextPrev = wx.createVideoContext(this.data.indexCurrent, this)//this是在自定义组件下,当前组件实例的this,以操作组件内 video 组件(在自定义组件中药加上this,如果是普通页面即不需要加)
            if (this.data.indexCurrent != curIdx) {
              console.log(123)
              videoContextPrev.pause()
              this.setData({
                indexCurrent: curIdx
              })
              var videoContextCurrent = wx.createVideoContext(curIdx, this)
              videoContextCurrent.play()
            }
          }
        },

    WXML

    <video  bindtap="video_play" id="{{item.sid}}" poster="{{item.thumbnail}}" auto-pause-if-open-native wx:elif="{{item.type=='video'}}" src="{{item.images}}" src="{{item.video}}"></video>
  • 相关阅读:
    Documents
    gitlab 安装和配置
    git相关知识
    马俊龙ansible教程分享
    源码安装python 报错,openssl: error while loading shared libraries: libssl.so.1.1
    jumpserver 常见错误解决
    nginx 定义:响应头和请求头
    gcc入门(下)
    gcc入门(上)
    awk命令
  • 原文地址:https://www.cnblogs.com/zwnsyw/p/12536006.html
Copyright © 2011-2022 走看看