小程序
小游戏
企业微信
微信支付
扫描小程序码分享
IOS 小程序【video组件】第一次播放结束后,播放按钮不再显示,无法重播了。进度条太靠边无法操作,操作就会触发系统快捷控制(iphone 11等)。其中播放按钮问题都一年了没有消息,大公司效率都这么高么?
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<video id="videoid" class="video" src='{{item}}' object-fit="cover" bindfullscreenchange="screenChange" bindplay="play" bindpause="pause" bindended="ended" show-fullscreen-btn="{{isFullScreen}}" show-play-btn="{{true}}" show-center-play-btn="{{true}}" /> isFullScreen: false, // 是否正在全屏中 (全屏时播放) curPlaying: -1, // 当前正在播放的视频 index // 用于获取 video 对应的 videoContext,避免重新渲染后播放错乱问题 play(e){ let videoContext = this.data.videoContext if(!this.data.isFullScreen) videoContext.pause(); // 先暂停,全屏再播放 if(this.data.curPlaying==-1){ this.data.curPlaying = e.currentTarget.dataset.idx; // console.log("play", this.data.curPlaying); // console.log("---------",videoContext); videoContext.requestFullScreen(e); } }, pause(e){ console.log('pause'); }, ended(e){ console.log('ended',e); if(this.data.curPlaying!=-1){ let videoContext = this.data.videoContext videoContext.seek(0); // seek(0) 因监听函数的异步执行,概率性导致播放结束退出全屏后继续播放,video 勿加 play-btn-position="center" 属性, 否则播放按钮无法正常显示出来 videoContext.exitFullScreen(e); } }, // 视频进入和退出全屏时触发 screenChange(e){ console.log("screenChange", e); console.log("screenChange--curPlaying", this.data.curPlaying); let videoContext = this.data.videoContext let isFullScreen = e.detail.fullScreen; console.log("screenChange---fullScreen", isFullScreen); if(isFullScreen){ // videoContext.seek(0); videoContext.play(); }else{ if(videoContext) videoContext.pause(); } // this.data.isFullScreen = isFullScreen; this.setData({ isFullScreen, }) this.data.curPlaying = isFullScreen ? this.data.curPlaying : -1; console.log("screenChange---curPlaying", this.data.curPlaying); },
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
刚刚试了下 Android 播放完后,中间都播放按钮也不再显示!! 代码发下:
<video id="myVideo" style="width:100%;height:100vh;" src="xxx"
autoplay="{{false}}" show-mute-btn="{{true}}" binderror="videoErrorCallback" show-center-play-btn="{{true}}" play-btn-position="center"
show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture="{{true}}" controls="{{true}}" loop="{{false}}" muted="{{false}}"
picture-in-picture-mode="{{['push', 'pop']}}" object-fit="fill"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'>
</video>
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<video id="videoid" class="video" src='{{item}}' object-fit="cover" bindfullscreenchange="screenChange" bindplay="play" bindpause="pause" bindended="ended" show-fullscreen-btn="{{isFullScreen}}" show-play-btn="{{true}}" show-center-play-btn="{{true}}" /> isFullScreen: false, // 是否正在全屏中 (全屏时播放) curPlaying: -1, // 当前正在播放的视频 index // 用于获取 video 对应的 videoContext,避免重新渲染后播放错乱问题 play(e){ let videoContext = this.data.videoContext if(!this.data.isFullScreen) videoContext.pause(); // 先暂停,全屏再播放 if(this.data.curPlaying==-1){ this.data.curPlaying = e.currentTarget.dataset.idx; // console.log("play", this.data.curPlaying); // console.log("---------",videoContext); videoContext.requestFullScreen(e); } }, pause(e){ console.log('pause'); }, ended(e){ console.log('ended',e); if(this.data.curPlaying!=-1){ let videoContext = this.data.videoContext videoContext.seek(0); // seek(0) 因监听函数的异步执行,概率性导致播放结束退出全屏后继续播放,video 勿加 play-btn-position="center" 属性, 否则播放按钮无法正常显示出来 videoContext.exitFullScreen(e); } }, // 视频进入和退出全屏时触发 screenChange(e){ console.log("screenChange", e); console.log("screenChange--curPlaying", this.data.curPlaying); let videoContext = this.data.videoContext let isFullScreen = e.detail.fullScreen; console.log("screenChange---fullScreen", isFullScreen); if(isFullScreen){ // videoContext.seek(0); videoContext.play(); }else{ if(videoContext) videoContext.pause(); } // this.data.isFullScreen = isFullScreen; this.setData({ isFullScreen, }) this.data.curPlaying = isFullScreen ? this.data.curPlaying : -1; console.log("screenChange---curPlaying", this.data.curPlaying); },
刚刚试了下 Android 播放完后,中间都播放按钮也不再显示!! 代码发下:
<video id="myVideo" style="width:100%;height:100vh;" src="xxx"
autoplay="{{false}}" show-mute-btn="{{true}}" binderror="videoErrorCallback" show-center-play-btn="{{true}}" play-btn-position="center"
show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture="{{true}}" controls="{{true}}" loop="{{false}}" muted="{{false}}"
picture-in-picture-mode="{{['push', 'pop']}}" object-fit="fill"
bindenterpictureinpicture='bindVideoEnterPictureInPicture'
bindleavepictureinpicture='bindVideoLeavePictureInPicture'>
</video>