Expo-Video网页端无法自动播放问题求助

针对你迁移到Expo SDK 52并使用expo-video后，网页端无法实现非静音自动播放的问题，以下是几个可行的解决方向：

1. 等待播放器就绪后触发播放 #

当前代码中useVideoPlayer的回调可能在Web端播放器尚未完全初始化时执行，导致play()调用被浏览器拦截。可以通过监听播放器的ready状态，确保资源加载完成后再尝试播放：

import { FC, useEffect } from 'react';
import { useVideoPlayer, VideoView } from 'expo-video';

import Box from '@/src/components/Box';
import useMediaStore from '@/src/store/mediaStore';
import useIsWeb from '@/src/lib/shared/utils/hooks/useIsWeb';

const VideoViewer: FC = () => {
  const isWeb = useIsWeb();
  const { url, title } = useMediaStore((state) => ({
    url: state.url,
    title: state.title,
  }));

  const player = useVideoPlayer(url);

  useEffect(() => {
    const handlePlay = async () => {
      try {
        if (isWeb) {
          // Web端需处理播放Promise，捕获浏览器拦截情况
          const playResult = player.play();
          if (playResult) await playResult;
        } else {
          player.play();
        }
      } catch (err) {
        // 播放被拦截时，可添加用户交互提示（比如显示手动播放按钮）
        console.log("自动播放被浏览器拦截，请点击视频播放");
      }
    };

    // 监听播放器就绪事件
    const subscription = player.addListener('ready', handlePlay);
    return () => subscription.remove();
  }, [player, isWeb]);

  return (
    <Box flex={1} backgroundColor={'black'}>
      <VideoView
        player={player}
        allowsFullscreen
        accessibilityLabel={title}
        accessibilityHint='Double-tap to play or pause the video'
        accessibilityRole='adjustable'
        style={{ flex: 1, width: 'auto' }}
      />
    </Box>
  );
};

export default VideoViewer;

2. 适配浏览器自动播放政策 #

浏览器对带声音的自动播放有严格限制：只有当页面存在用户主动交互（点击、触摸等）后，才能自动播放带声音的视频。如果你的页面是直接加载而非用户交互触发进入的，无法绕过这个限制，此时可以：

• 初始静音自动播放，同时显示“取消静音”按钮，让用户手动开启声音
• 在页面加载后显示醒目的播放按钮，引导用户点击触发播放（这是符合浏览器政策的合规方案）

3. 确保视频元素可见性 #

Web端浏览器可能会限制不可见或尺寸异常的视频自动播放，检查VideoView的初始样式，避免设置display: none、opacity: 0等隐藏属性，确保视频在页面加载时处于可见状态。

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