h5视频video安卓、ios兼容性问题开发总结

 <video
        preload="metadata"
        playsInline={!isFullScreen}
        webkit-playsinline={isFullScreen ? 0 : 1}
        x5-video-player-type="h5"
        x5-video-player-fullscreen={1}
        x5-playsinline={1}
        x5-video-options="disableDownloadBtn"
        x5-video-orientation="portrait"
        src={`${videoUrl}#t=0.001`}
        ref={videoRef}
        className={`${
          isFullScreen ? css.containFullscreen : css.fillVideoPlayer
        }`}
        poster={showPoster ? videoRef.current?.poster : ""}
        onTimeUpdate={handleTimeUpdate}
        onLoadedMetadata={handleLoadedMetadata}
        onEnded={handleEnded}
        controlsList="nodownload"
        style={{
          opacity: getDevice().isAndroid ? (isLoaded ? 1 : 0) : 1,
        }}
      >
        <source src={videoUrl} type="video/mp4" />
      </video>

　　

1、ios监听全屏和退出全屏事件：webkitbeginfullscreen

video.addEventListener('webkitbeginfullscreen', () => {
  console.log('视频进入全屏');
});

video.addEventListener('webkitendfullscreen', () => {
  console.log('视频退出全屏');
});

2、安卓监听全屏和退出全屏事件：fullscreenchange 

全屏事件的标准 API：fullscreenchange 事件
// 监听全屏变化
  useEffect(() => {
    const handleFullScreenChange = () => {
      setIsFullScreen(!!document.fullscreenElement);
      if (videoRef.current) {
        if (!document.fullscreenElement) {
          console.log("退出全屏了");
        } else {
          console.log("全屏");
        }
      }
    };
    document.addEventListener("fullscreenchange", handleFullScreenChange);
    return () => {
      document.removeEventListener("fullscreenchange", handleFullScreenChange);
    };
  }, []);

　　3、由于ios在播放视频的时候，点击播放会 跳出当前屏幕播放，想要不是全屏就在页面内播放使用自定义的样式，全屏时跳出来播放使用原生自带的滑条等样式，需要解决ios交互问题

  // 进入全屏模式
  const enterFullScreen = () => {
    if (videoRef.current) {
      // 兼容安卓的（ios不适用）
      if (videoRef.current.requestFullscreen) {
        videoRef.current.requestFullscreen();
      } else if (videoRef.current.mozRequestFullScreen) {
        videoRef.current.mozRequestFullScreen();
      } else if (videoRef.current.webkitRequestFullscreen) {
        videoRef.current.webkitRequestFullscreen();
      } else if (videoRef.current.msRequestFullscreen) {
        videoRef.current.msRequestFullscreen();
      }
      //ios进入全屏播放的话先暂停，再设置全屏，最后再延迟触发播放。这样能使点全屏按钮时跳出屏幕全屏播放，在退出全屏播放在全屏时能保持还是跳出来播放，如果不加播放的时候强制暂停，会导致第二次全屏播放的时候在页面内全屏播放
      if (getDevice().isiOS && !videoRef.current.paused) {
        videoRef.current?.pause();
      }
      setIsFullScreen(true);
      if (getDevice().isiOS) {
        setTimeout(() => {
          videoRef.current?.play();
        }, 0);
      }
    }
  };

4、安卓的全屏（ios不生效）

 if (videoRef.current.requestFullscreen) {
        videoRef.current.requestFullscreen();
      } else if (videoRef.current.mozRequestFullScreen) {
        videoRef.current.mozRequestFullScreen();
      } else if (videoRef.current.webkitRequestFullscreen) {
        videoRef.current.webkitRequestFullscreen();
      } else if (videoRef.current.msRequestFullscreen) {
        videoRef.current.msRequestFullscreen();
      }

　　

 5、为视频页面内播放object-fit: fill;但是fill充满屏幕后，在安卓手机上全屏时视频会被纵向拉伸充满整个屏幕，效果不是太好，这个时候，全屏时统一使用object-fit: contain;退出全屏时页面内时fill拉伸

.fillVideoPlayer,.containFullscreen {
  width: 100%;
  height: 100%;
  display: block;
}
// 全屏时统一contain自适应，页面内时fill拉伸
.fillVideoPlayer {
  object-fit: fill;
}

.containFullscreen  {
  object-fit: contain;
}

　　总结：页面内就playsinline播放，全屏时就“true”或1，退出全屏时页面内播放“false”或0

 <video
        preload="metadata"
        playsInline={!isFullScreen}
        webkit-playsinline={isFullScreen ? 0 : 1}
        x5-video-player-type="h5"
        x5-video-player-fullscreen={1}
        x5-playsinline={1}
        x5-video-options="disableDownloadBtn"
        x5-video-orientation="portrait"
        src={`${videoUrl}#t=0.001`}
        ref={videoRef}
        className={`${
          isFullScreen ? css.containFullscreen : css.fillVideoPlayer
        }`}
        poster={showPoster ? videoRef.current?.poster : ""}
        onTimeUpdate={handleTimeUpdate}
        onLoadedMetadata={handleLoadedMetadata}
        onEnded={handleEnded}
        controlsList="nodownload"
        style={{
          opacity: getDevice().isAndroid ? (isLoaded ? 1 : 0) : 1,
        }}
      >
        <source src={videoUrl} type="video/mp4" />
      </video>