使用expo-av组件渲染的Video为何无法自动播放？

原因 #

当前主流浏览器的自动播放政策限制：非静音视频必须经过用户主动交互（比如点击页面）才能自动播放，这是浏览器为防止自动播放音频打扰用户制定的规则。你设置了shouldPlay={true}但未开启静音，因此浏览器阻止了自动播放行为。

解决办法 #

方法1：设置静音自动播放 #

给 Video 组件添加muted={true}属性，静音状态下浏览器允许自动播放：

<Video
  style={{width: 500, height: 300, resizeMode: 'contain'}}
  source={{
    uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
  }}
  resizeMode={ResizeMode.CONTAIN}
  shouldPlay={true}
  muted={true} // 添加静音属性
  videoStyle={{width: 500, height:300}}
/>

方法2：通过用户交互触发播放（保留声音） #

如果需要视频有声音，可以在页面添加播放按钮，让用户点击后启动播放并取消静音：

import { Video, ResizeMode } from 'expo-av';
import { useState, useRef } from 'react';
import { Button } from 'react-native';

export default function App() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = async () => {
    if (videoRef.current) {
      await videoRef.current.playAsync();
      setIsPlaying(true);
    }
  };

  return (
    <>
      <Video
        ref={videoRef}
        style={{width: 500, height: 300, resizeMode: 'contain'}}
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        }}
        resizeMode={ResizeMode.CONTAIN}
        shouldPlay={isPlaying}
        muted={false}
        videoStyle={{width: 500, height:300}}
      />
      <Button title={isPlaying ? '暂停' : '播放视频'} onPress={handlePlay} />
    </>
  );
}

方法3：结合 useEffect 尝试自动播放（受浏览器政策限制） #

若需尝试自动播放带声音的视频，可在组件挂载后调用playAsync，但仅当页面已有用户交互（如用户之前点击过页面）时才会生效：

import { Video, ResizeMode } from 'expo-av';
import { useRef, useEffect } from 'react';

export default function App() {
  const videoRef = useRef(null);

  useEffect(() => {
    const playVideo = async () => {
      if (videoRef.current) {
        try {
          await videoRef.current.playAsync();
        } catch (error) {
          console.log('自动播放失败：', error.message);
        }
      }
    };
    playVideo();
  }, []);

  return (
    <Video
      ref={videoRef}
      style={{width: 500, height: 300, resizeMode: 'contain'}}
      source={{
        uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
      }}
      resizeMode={ResizeMode.CONTAIN}
      shouldPlay={true}
      videoStyle={{width: 500, height:300}}
    />
  );
}

注意：这种方法在用户未交互过页面时大概率会被浏览器阻止，仅适用于已有用户交互的场景。

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