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