收藏
回答

关于多个video

问题模块
API和组件

我在一个页面里面展现所有的视频,用户点击一个视频后直接播放,如果打开多个,希望将原先打开的视频自动暂停,请问该怎么弄,谢谢。


最后一次编辑于  2017-07-25  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

7 个回答

  • 九
    2018-08-07



    wxml:

    <video

    id='{{item.id}}'

    controls='false'

    src='{{item.src}}'

    bindplay='playVideoFn'>

    </video>


    js:

    data:{

            oldvideoContext: ''

        }



    playVideoFn: function(e) {

    this.videoContext = wx.createVideoContext(e.currentTarget.id);

    if (this.data.oldvideoContext && this.data.oldvideoContext.domId !== this.videoContext.domId){

    this.data.oldvideoContext.pause();

    }

    this.setData({ oldvideoContext: this.videoContext})

    }









    2018-08-07
    赞同 1
    回复
  • 徐烈
    徐烈
    2017-07-26

    我按照这种方式做,在开发者工具里可以每次只播放一个,但是暂停后,需要在播放,就不能直接用他的默认控制器了,但是在真机上,不能实现一次只允许播放一个,苹果和安卓的华为机都测了,不行。

    js:

    playVideo: function (e){

        var that = this;

        var VideoID = e.target.dataset.id

        var videoContext

        if (that.data.oldVideoID == ''){

          that.setData({

            oldVideoID: e.target.dataset.id

          })

        }

        if (VideoID != that.data.oldVideoID && that.data.oldVideoID!='') {

          videoContext = wx.createVideoContext(that.data.oldVideoID)

          videoContext.pause()

          console.log('videoContext.domId', videoContext)

          that.setData({

            oldVideoID: VideoID

          })

        }

      },


    wxml:

     <video id="Video1" data-id="Video1" bindtap="playVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"    controls></video>

      <video id="Video2" data-id="Video2" bindtap="playVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"    controls></video>

      <video id="Video3" data-id="Video3" bindtap="playVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"   controls></video>


    2017-07-26
    赞同
    回复
  • 徐烈
    徐烈
    2017-07-25

    多次点击后报这样的错误。



    2017-07-25
    赞同
    回复
  • 徐烈
    徐烈
    2017-07-25

    wx.createVideoContext(id) ,这个中id需要我对页面上的每一个video自己定一个值把

    2017-07-25
    赞同
    回复
  • asmcos
    asmcos
    2017-07-25

    定义为空,

    赋值:   this.data.oldvideoContext = videoContext

    2017-07-25
    赞同
    回复
  • 徐烈
    徐烈
    2017-07-25

     this.data.oldvideoContext怎么获取的?怎么定义

    2017-07-25
    赞同
    回复
  • asmcos
    asmcos
    2017-07-25

      var videoContext = wx.createVideoContext(id) 

        

        if (this.data.oldvideoContext && this.data.oldvideoContext.domId != videoContext.domId) {

          

          this.data.oldvideoContext.pause()

        }

        this.data.oldvideoContext = videoContext


    大意就是对每个视频做一个 videoContext ,新的视频开始前,将老的视频 pause.


    2017-07-25
    赞同
    回复