如何在expo-av中视频播放结束后显示指定图片？

你可以通过状态控制+条件渲染的方式实现需求，核心是利用didJustFinish判断播放结束，切换显示独立图片。具体步骤如下：

1. 定义状态控制图片显示
   用useState创建一个布尔状态，用来决定是展示视频还是结束图片：

const [showEndImage, setShowEndImage] = useState(false);

2. 完善播放状态回调
   在onPlaybackStatusUpdate里，判断视频是否真正播放结束（排除循环播放的情况，避免误触发），更新状态：

const onPlaybackStatusUpdate = useCallback((status) => {
  // didJustFinish为true表示播放到末尾，同时排除循环播放的场景
  if (status.didJustFinish && !status.isLooping) {
    setShowEndImage(true);
  }
}, []);

3. 条件渲染视频和图片
   根据showEndImage状态，切换渲染视频组件或图片组件：

完整示例代码：

import { View, Image } from 'react-native';
import { Video } from 'expo-av';
import { useState, useCallback } from 'react';

export default function EndScreenVideoPlayer() {
  const [video, setVideo] = useState(null);
  const [showEndImage, setShowEndImage] = useState(false);
  // 替换成你的视频和图片地址
  const VIDEO_URI = '你的视频地址';
  const END_IMAGE_URI = '你的独立JPG地址';

  const onPlaybackStatusUpdate = useCallback((status) => {
    if (status.didJustFinish && !status.isLooping) {
      setShowEndImage(true);
    }
  }, []);

  return (
    <View style={{ flex: 1, backgroundColor: '#000' }}>
      {!showEndImage ? (
        <Video
          ref={setVideo}
          source={{ uri: VIDEO_URI }}
          style={{ flex: 1 }}
          useNativeControls
          onPlaybackStatusUpdate={onPlaybackStatusUpdate}
          resizeMode="contain"
        />
      ) : (
        <Image
          source={{ uri: END_IMAGE_URI }}
          style={{ flex: 1, resizeMode: 'contain' }}
        />
      )}
    </View>
  );
}

注意点：

• 如果你的视频开启了循环播放（isLooping={true}），必须保留!status.isLooping判断，否则视频循环时会重复触发图片显示
• 图片的resizeMode可以根据需求调整，比如cover或stretch

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