收藏
回答

多个video在一个页面时,如何一次只能播放一个

页面如下:



相应代码如下:


<view class="video-view" wx:for="{{videoList}}" wx:key="{{index}}" wx:for-item="video">
     <video style="width:100%" id="myVideo{{index}}" bindtap="playVideo" data-vid="myVideo{{index}}" data-id="{{video.id}}"  poster="{{video.expertLogo}}" src="{{video.url}}" controls></video>
     <view class="title">
       <view class="title-text">{{video.title}}</view>
     </view>
   </view>


playVideo: function (e) {
    var that = this;
    var videoID = e.target.dataset.vid
    var videoContextOld
    var videoContextNew
    var _Url = bathUrl + "/parentClass/updatePv";
    console.log('videoID', videoID)
    if (videoID != that.data.oldVideoID) {
      if (that.data.oldVideoID != '') {
        videoContextOld = wx.createVideoContext(that.data.oldVideoID)
        videoContextOld.pause()
        console.log('videoContextOld', videoContextOld)
      }
      videoContextNew = wx.createVideoContext(videoID)
      videoContextNew.play()
      videoContextNew.requestFullScreen
      console.log('videoContextNew', videoContextNew)
      that.setData({
        oldVideoID: videoID
      })
      wx.request({
        url: _Url,
        method: 'POST',
        data: { id: e.target.dataset.id },
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          console.log('更新成功')
        }
      })
    } else {
      videoContextNew = wx.createVideoContext(that.data.oldVideoID)
      videoContextNew.pause()
      videoContextNew.requestFullScreen
    }
  },


回答关注问题邀请回答
收藏

3 个回答

  • 王妙端
    王妙端
    2022-02-16
     videoPlay(e){
        let videoid = e.currentTarget.dataset.id;
        if(this.curVideoId !== videoid && this.curVideoContext){
          ////关闭上一个播放的视频
          this.curVideoContext.stop();
        }
        this.curVideoId = videoid;
        ////创建控制视频标签的实例对象
        this.curVideoContext = wx.createVideoContext(this.curVideoId,this);
      },
    
    <video loop="loop"
      controls="controls"
      autoplay="{{false}}"
      controlsList="nodownload"
      webkit-playsinline="true"
      playsinline="true"  src="{{item.videoUrl}}"
      auto-pause-if-navigate="true"
      id="{{item.id}}"
      data-id="{{item.id}}"
      bindplay="videoPlay"
    ></video>
    


    2022-02-16
    有用
    回复
  • 徐烈
    徐烈
    2017-08-01

    是想这么做,但是不知道如何实现,现在写的代码,在开发工具里是可以做到每次只允许播放一个,他会自动停掉原来播放的,但是到了真机上,不管安卓还是苹果,都不行。

    2017-08-01
    有用
    回复
  • 铭锋科技
    铭锋科技
    2017-07-31

    滚动后,再播放下一个视频,或者,要播放下一个视频,停止上一个视频

    2017-07-31
    有用
    回复
登录 后发表内容