移动端监听 video 全屏和退出全屏

android和ios监听 video 全屏和退出全屏 androidiosios默认只能全屏播放解决方案

android

  //判断进入退出全屏
  checkIsFullScreen() {
    const isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
    return isFullScreen == undefined ? false : isFullScreen;
  }

  onFullscreenchange = ()=>{
    if (this.checkIsFullScreen()) {
      console.log('进入全屏')
    } else {
      console.log('退出全屏')
    }
  }

  // 监听全屏或退出全屏
  onScreenChange = ()=>{
    document.addEventListener("fullscreenchange", function() {
      this.onFullscreenchange()
    })

    /* Firefox */
    document.addEventListener("mozfullscreenchange", function() {
      this.onFullscreenchange()
    })

    /* Chrome, Safari 和 Opera */
    document.addEventListener("webkitfullscreenchange", function() {
      this.onFullscreenchange()
    })

    /* IE / Edge */
    document.addEventListener("msfullscreenchange", function() {
      this.onFullscreenchange()
    })
  }

ios

// 监听全屏或退出全屏
onScreenChange = () => {
  this.videoRef.addEventListener("webkitbeginfullscreen", () => {
    console.log("进入全屏");
  });
  this.videoRef.addEventListener("webkitendfullscreen", () => {
    console.log("退出全屏");
  });
};

ios默认只能全屏播放解决方案

标签上加上属性：webkit-playsinline="true" playsinline="true"
webkit-playsinline="true" 这个属性是ios 中设置可以让视频在小窗内播放，也就是不是全屏播放
playsinline="true" IOS微信浏览器支持小窗内播放