iOS端Mux Player全屏功能失效问题求助

问题根源 #

iOS Safari的全屏API采用前缀式实现webkitRequestFullscreen，而非标准的requestFullscreen；同时Mux Player组件的ref指向播放器实例，而非原生video元素，直接调用requestFullscreen会出现方法未定义的错误。

修复代码 #

修改startVideo函数，兼容多浏览器全屏API，并正确获取原生video元素：

import { useRef } from 'react';
import MuxPlayer from '@mux/mux-player-react';

const YourVideoComponent = () => {
  const muxPlayerRef = useRef(null);
  const isMobile = /* 你的移动端判断逻辑 */;

  const startVideo = () => {
    if (!muxPlayerRef.current) return;

    // 获取Mux Player内部的原生video元素
    const videoElement = muxPlayerRef.current.video || muxPlayerRef.current;
    
    // 触发播放并捕获可能的错误
    videoElement.play().catch(err => {
      console.error('视频播放失败:', err);
    });

    // 兼容不同浏览器的全屏方法
    if (videoElement.requestFullscreen) {
      videoElement.requestFullscreen();
    } else if (videoElement.webkitRequestFullscreen) {
      // 适配iOS Safari及旧版WebKit内核浏览器
      videoElement.webkitRequestFullscreen();
    } else if (videoElement.mozRequestFullScreen) {
      // 适配旧版Firefox
      videoElement.mozRequestFullScreen();
    } else if (videoElement.msRequestFullscreen) {
      // 适配IE/Edge旧版本
      videoElement.msRequestFullscreen();
    }
  };

  return (
    <>
      <button onClick={startVideo}>播放并全屏</button>
      <MuxPlayer
        ref={muxPlayerRef}
        playbackId={isMobile ? 'B02VkHGciyg01SX5cYcck' : 'fqrRcy8X7fl8ZW7llg7g02y'}
        streamType="on-demand"
      />
    </>
  );
};

export default YourVideoComponent;

关键注意点 #

• 用户手势要求：iOS Safari强制全屏操作必须由用户主动触发（如点击、触摸事件），确保startVideo绑定在用户交互元素（如按钮）的点击事件上，禁止通过定时器等非用户触发方式调用。
• 错误捕获：对play()方法添加错误捕获，避免视频加载失败、权限限制等场景下的无提示报错。

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