收藏
回答

IOS 小程序【video组件】第一次播放结束后,播放按钮不再显示,无法重播了。进度条太靠边

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug video 微信iOS客户端 最新 2.14.1

IOS 小程序【video组件】第一次播放结束后,播放按钮不再显示,无法重播了。进度条太靠边无法操作,操作就会触发系统快捷控制(iphone 11等)。其中播放按钮问题都一年了没有消息,大公司效率都这么高么?

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

2 个回答

  • 涂之包
    涂之包
    2021-03-19
    <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);
    },
    
    2021-03-19
    有用
    回复 1
    • 涂之包
      涂之包
      2021-03-19
      因为video宽高较小出现的问题。你试试我这样处理。
      2021-03-19
      回复
  • 争鸣
    争鸣
    2021-03-19

    刚刚试了下 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>


    2021-03-19
    有用
    回复
登录 后发表内容
问题标签