使用expo-av的React Native视频播放问题：卡顿及可视时停止

问题根源分析 #

1. 完全可视视频无法播放 #

• 可视性判定逻辑不完善：默认viewabilityConfig未设置minimumViewTime，快速滚动时短暂可见的视频会被误判为可视，但此时视频可能未完成加载，调用playAsync会失败。
• 视频加载状态未处理：视频未加载完成就触发播放，playAsync返回错误导致无法播放。
• 闭包依赖问题：onViewableItemsChanged的useCallback依赖为空数组，可能导致setActivePostId引用过期，无法正确更新活跃ID。

2. 可视视频突然停止 #

• 频繁触发可视性判定：滚动过程中onViewableItemsChanged频繁调用，未设置waitForInteraction和minimumViewTime会导致activePostId频繁切换，即使视频仍在可视区域。
• 多可视Item处理不当：多个视频同时部分可见时，代码仅取第一个viewableItem，导致原本可视的视频被错误标记为非活跃，从而暂停。
• 组件资源未释放：FlatList回收offscreen组件时，未正确释放视频资源，导致后续播放逻辑混乱。

3. 视频加载卡顿 #

• 无预加载策略：仅当视频进入可视区域才开始加载，用户等待时间长。
• 缓存策略未优化：默认不启用本地缓存，每次进入可视区域都重新请求视频。
• 视频源未适配移动端：高分辨率、未优化编码的视频增加加载时间和播放卡顿。

针对性解决方案 #

一、修复可视性判定不稳定 #

1. 完善Viewability配置
   提高可见度阈值，添加最小可视时间，避免快速滚动误判：

const viewabilityConfig = {
  itemVisiblePercentThreshold: 70, // 视频70%可见才触发播放
  minimumViewTime: 300, // 持续可见300ms才判定为活跃
  waitForInteraction: false // 滚动过程中直接判定，无需等待用户停止
};

2. 处理多可视Item场景
   筛选出可见度最高的视频作为活跃项，避免多个视频同时触发播放逻辑：

const onViewableItemsChanged = useCallback(({ viewableItems }) => {
  if (viewableItems.length === 0) return;
  const mostVisibleItem = viewableItems.reduce((prev, curr) => 
    prev.itemVisiblePercent > curr.itemVisiblePercent ? prev : curr
  );
  setActivePostId(mostVisibleItem.item.id);
}, []);

3. 修正useCallback依赖
   确保onViewableItemsChanged的useCallback包含正确依赖（若使用外部状态，需加入依赖数组）。

二、解决播放不一致问题 #

1. 等待视频加载完成后播放
   在VideoPost中，先获取视频当前状态，仅当加载完成且需要播放时才调用playAsync：

useEffect(() => {
  const handlePlayback = async () => {
    if (!video.current) return;
    const currentStatus = await video.current.getStatusAsync();
    if (!currentStatus.isLoaded) return;

    if (activePostId === post.id) {
      !currentStatus.isPlaying && await video.current.playAsync();
    } else {
      currentStatus.isPlaying && await video.current.pauseAsync();
    }
  };
  handlePlayback();
}, [activePostId, post.id]);

2. 组件卸载时释放资源
   添加清理函数，避免内存泄漏和残留播放逻辑：

useEffect(() => {
  return () => {
    if (video.current) {
      video.current.pauseAsync();
      video.current.unloadAsync();
    }
  };
}, []);

3. 监听加载状态自动播放
   在onPlaybackStatusUpdate中，当视频加载完成且为活跃项时，自动触发播放：

onPlaybackStatusUpdate={(newStatus) => {
  setStatus(newStatus);
  if (newStatus.isLoaded && activePostId === post.id && !newStatus.isPlaying) {
    video.current?.playAsync();
  }
}}

三、优化视频加载卡顿 #

1. 预加载相邻视频
   在HomeVideoFeed中，监听可视项，预加载当前视频的前后项，减少用户等待时间：

useEffect(() => {
  const preloadAdjacentVideos = async () => {
    const visibleItems = flatListRef.current?.getVisibleItems();
    if (!visibleItems?.length) return;
    const currentIndex = visibleItems[0].index;
    const preloadTargets = [currentIndex -1, currentIndex +1].filter(idx => idx >=0 && idx < posts.length);
    
    for (const idx of preloadTargets) {
      const video = new Video();
      await video.loadAsync({ uri: posts[idx].video }, { shouldPlay: false });
    }
  };
  preloadAdjacentVideos();
}, [posts, activePostId]);

2. 启用缓存策略
   在Video组件中设置缓存策略，优先读取本地缓存：

<Video
  // ...其他属性
  cachePolicy={CachePolicy.READ_CACHE_THEN_NETWORK}
/>

3. 优化视频源

• 使用H.264编码的视频，适配移动端分辨率（如720p）。
• 采用CDN分发视频，减少网络延迟。

优化后的完整代码示例 #

HomeVideoFeed组件 #

import { View, FlatList } from "react-native";
import React, { useEffect, useRef, useState, useCallback } from "react";
import VideoPost from "./VideoPost";
import { Video } from "expo-av";

const dummyPosts = [
  { id: "1", video: "video_url_1", caption: "Post 1" },
  { id: "2", video: "video_url_2", caption: "Post 2" },
  { id: "3", video: "video_url_3", caption: "Post 3" },
];

const HomeVideoFeed = () => {
  const [activePostId, setActivePostId] = useState(dummyPosts[0].id);
  const [posts, setPosts] = useState(dummyPosts);
  const flatListRef = useRef(null);

  const onViewableItemsChanged = useCallback(({ viewableItems }) => {
    if (viewableItems.length === 0) return;
    const mostVisibleItem = viewableItems.reduce((prev, curr) => 
      prev.itemVisiblePercent > curr.itemVisiblePercent ? prev : curr
    );
    setActivePostId(mostVisibleItem.item.id);
  }, []);

  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 70,
    minimumViewTime: 300,
    waitForInteraction: false,
  });

  const viewabilityConfigCallbackPairs = useRef([
    {
      viewabilityConfig: viewabilityConfig.current,
      onViewableItemsChanged,
    },
  ]);

  useEffect(() => {
    const preloadAdjacentVideos = async () => {
      const visibleItems = flatListRef.current?.getVisibleItems();
      if (!visibleItems?.length) return;
      const currentIndex = visibleItems[0].index;
      const preloadTargets = [currentIndex -1, currentIndex +1].filter(idx => idx >=0 && idx < posts.length);
      
      for (const idx of preloadTargets) {
        const video = new Video();
        try {
          await video.loadAsync({ uri: posts[idx].video }, { shouldPlay: false });
        } catch (err) {
          console.error(`Preload error for post ${posts[idx].id}:`, err);
        }
      }
    };
    preloadAdjacentVideos();
  }, [posts, activePostId]);

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        ref={flatListRef}
        data={posts}
        renderItem={({ item }) => (
          <VideoPost post={item} activePostId={activePostId} />
        )}
        keyExtractor={(item) => item.id}
        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
        showsVerticalScrollIndicator={false}
        pagingEnabled
      />
    </View>
  );
};

export default HomeVideoFeed;

VideoPost组件 #

import React, { useEffect, useRef, useState } from "react";
import { Video, CachePolicy } from "expo-av";
import { View, Pressable, StyleSheet, useWindowDimensions } from "react-native";

const VideoPost = ({ post, activePostId }) => {
  const video = useRef(null);
  const [status, setStatus] = useState(null);
  const { height } = useWindowDimensions();

  useEffect(() => {
    const handlePlayback = async () => {
      if (!video.current) return;
      const currentStatus = await video.current.getStatusAsync();
      if (!currentStatus.isLoaded) return;

      if (activePostId === post.id) {
        !currentStatus.isPlaying && await video.current.playAsync().catch(err => console.error(`Play error:`, err));
      } else {
        currentStatus.isPlaying && await video.current.pauseAsync().catch(err => console.error(`Pause error:`, err));
      }
    };
    handlePlayback();
  }, [activePostId, post.id]);

  useEffect(() => {
    return () => {
      if (video.current) {
        video.current.pauseAsync();
        video.current.unloadAsync();
      }
    };
  }, []);

  return (
    <Pressable style={{ height: height, width: "100%" }}>
      <Video
        ref={video}
        source={{ uri: post.video }}
        style={StyleSheet.absoluteFill}
        resizeMode="cover"
        onPlaybackStatusUpdate={(newStatus) => {
          setStatus(newStatus);
          if (newStatus.isLoaded && activePostId === post.id && !newStatus.isPlaying) {
            video.current?.playAsync().catch(err => console.error(err));
          }
        }}
        isLooping
        cachePolicy={CachePolicy.READ_CACHE_THEN_NETWORK}
        shouldPlay={false}
      />
    </Pressable>
  );
};

export default VideoPost;

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