iOS上实现HTML5视频内联播放且保留全屏功能（React场景）

问题核心是playsinline仅控制视频默认内联播放，全屏按钮失效通常是浏览器全屏安全限制或兼容性问题导致，以下是具体解决方法：

1. 完善基础属性，保证兼容性 #

除playsinline外，添加针对不同浏览器的兼容属性，同时确保controls属性存在（用于显示包含全屏按钮的控制栏）：

<video
  src="你的视频地址.mp4"
  playsinline
  webkit-playsinline  // 适配iOS Safari、Chrome移动端
  x5-playsinline      // 适配微信X5内核浏览器
  controls
  ref={videoRef}
/>

2. 手动绑定全屏触发逻辑（原生按钮失效时备用） #

如果原生全屏按钮仍无响应，可通过React Ref获取视频元素，调用浏览器全屏API实现自定义全屏功能（注意必须在用户交互事件中触发）：

import { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const toggleFullscreen = () => {
    const video = videoRef.current;
    if (!video) return;

    // 兼容不同浏览器的全屏API
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
    } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
    }
  };

  return (
    <div>
      <video
        src="你的视频地址.mp4"
        playsinline
        webkit-playsinline
        x5-playsinline
        controls
        ref={videoRef}
      />
      {/* 自定义全屏按钮，原生按钮失效时启用 */}
      <button onClick={toggleFullscreen}>切换全屏</button>
    </div>
  );
}

export default VideoPlayer;

3. 可选：监听全屏状态变化 #

如果需要根据全屏状态调整UI，可添加全局事件监听：

import { useRef, useEffect } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  useEffect(() => {
    const handleFullscreenChange = () => {
      const isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );
      console.log('当前全屏状态:', isFullscreen);
      // 这里可添加状态更新逻辑，比如隐藏/显示自定义按钮
    };

    // 绑定各浏览器的全屏状态变化事件
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', handleFullscreenChange);

    return () => {
      // 组件卸载时移除事件监听
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
      document.removeEventListener('mozfullscreenchange', handleFullscreenChange);
      document.removeEventListener('MSFullscreenChange', handleFullscreenChange);
    };
  }, []);

  // 其余代码同前...
}

关键注意事项 #

• 全屏API必须由用户主动交互触发（比如点击事件），不能在组件挂载、自动播放等非用户交互场景调用，否则会被浏览器安全策略拦截。
• iOS Safari要求视频自动播放时必须静音（添加muted属性），否则playsinline可能不生效，同时影响全屏功能。
• 确保视频元素未被其他DOM元素遮挡，否则原生全屏按钮可能无法被点击。

内容的提问来源于stack exchange，提问作者Idan Levi