页面如下:
相应代码如下:
< 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 } }, |
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>
是想这么做,但是不知道如何实现,现在写的代码,在开发工具里是可以做到每次只允许播放一个,他会自动停掉原来播放的,但是到了真机上,不管安卓还是苹果,都不行。
滚动后,再播放下一个视频,或者,要播放下一个视频,停止上一个视频