Expo-video返回页面后无法从头播放的问题解决咨询

问题根源 #

你之前使用的seekBy(0)是相对偏移操作，仅会在当前播放位置偏移0，不会回到视频开头；同时expo-video的Player方法均为异步，未等待操作完成就执行下一步会导致流程错乱，进而无法触发从头播放。

修正后的代码实现 #

import { useFocusEffect } from 'expo-router';
import { useCallback, useRef } from 'react';
import { VideoView, useVideoPlayer } from 'expo-video';

export default function VideoScreen() {
  // 创建Video Player实例，初始禁止自动播放，把控制权交给focus逻辑
  const player = useVideoPlayer({
    source: { uri: videoData.url },
    shouldPlay: false,
    isLooping: false,
  });
  const playerRef = useRef(player);

  useFocusEffect(
    useCallback(async () => {
      const currentPlayer = playerRef.current;
      if (!currentPlayer) return;

      try {
        // 先暂停当前播放状态，避免播放中跳转的异常
        await currentPlayer.pause();
        // 绝对跳转到视频开头（0秒位置）
        await currentPlayer.seekTo(0);
        // 启动播放
        await currentPlayer.play();
      } catch (error) {
        console.error('重置视频播放失败:', error);
      }
    }, [])
  );

  return (
    <VideoView
      style={{ width: 400, height: 400 }}
      player={player}
      allowsPictureInPicture
      nativeControls={false}
    />
  );
}

关键修改点 #

• 替换seekBy(0)为seekTo(0)：seekTo是绝对定位方法，可直接跳转到指定时间点（此处为视频开头）。
• 异步操作添加await：确保暂停、跳转、播放三个步骤按顺序执行，避免状态冲突。
• 初始shouldPlay: false：将播放控制权完全交给useFocusEffect，避免组件挂载时自动播放干扰重置逻辑。
• 使用playerRef：避免Player实例引用变化导致的重复触发或逻辑失效。

额外优化（可选） #

如果页面离开时视频仍在后台播放，返回时可能出现状态异常，可在页面失焦时添加暂停逻辑：

useFocusEffect(
  useCallback(() => {
    // 页面聚焦时的重置逻辑...

    // 页面失焦时暂停视频
    return () => {
      playerRef.current?.pause();
    };
  }, [])
);

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