You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Expo-AV Video组件无触发持续请求CDN文件问题求助

问题描述

我在应用中使用Expo-AV实现视频播放,代码如下:

import React from 'react'
//import Video, { VideoRef } from 'react-native-video';
import { Video } from "expo-av";

export default function test_video() {
    const videoRef = React.useRef();
    return (
        <Video
            source={{ uri: URL_ + '/hls_media/1709272706_11983_7564/video.m3u8' }}
            muted={true}
            ref={videoRef}
            shouldPlay={false}
        />
    )
}

出现异常:Video组件在无状态更新、无任何操作且未播放视频的情况下,持续每隔几秒向CDN请求m3u8文件(截图如下:显示重复请求CDN的截图)。已知状态更新会导致组件重渲染并重新请求CDN,但本次无此类触发条件。

附使用的m3u8文件内容:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:3.000000,
video0.ts
#EXTINF:3.000000,
video1.ts
#EXTINF:2.366667,
video2.ts
#EXT-X-ENDLIST
原因分析

尽管你的m3u8文件包含#EXT-X-ENDLIST标记(表明这是完整的点播流而非直播流),但Expo-AV的Video组件默认开启预加载机制——即使设置了shouldPlay={false},组件仍可能定期请求m3u8文件以校验流状态,或是内部缓存策略未正确识别该流为已结束的点播内容,导致重复请求。

解决方案

可以尝试以下几种方式解决该问题:

  • 指定缓存策略:添加cachePolicy属性,让组件优先使用缓存的m3u8内容,减少重复网络请求:
    <Video
        source={{ uri: URL_ + '/hls_media/1709272706_11983_7564/video.m3u8' }}
        muted={true}
        ref={videoRef}
        shouldPlay={false}
        cachePolicy="cacheElseNetwork" // 优先读取缓存,无缓存时再请求网络
    />
    
  • 调整组件属性:通过useNativeControls={false}禁用原生控制栏,搭配resizeMode属性,可能改变组件的预加载行为:
    <Video
        source={{ uri: URL_ + '/hls_media/1709272706_11983_7564/video.m3u8' }}
        muted={true}
        ref={videoRef}
        shouldPlay={false}
        useNativeControls={false}
        resizeMode="contain"
    />
    
  • 手动控制组件挂载:通过状态控制Video组件的渲染时机,仅在需要播放时才挂载组件,从根源避免不必要的请求:
    import React, { useState } from 'react'
    import { Video } from "expo-av";
    
    export default function test_video() {
        const videoRef = React.useRef();
        const [isVideoReady, setIsVideoReady] = useState(false);
    
        return (
            <>
                {/* 可添加播放按钮触发setIsVideoReady(true) */}
                {isVideoReady && (
                    <Video
                        source={{ uri: URL_ + '/hls_media/1709272706_11983_7564/video.m3u8' }}
                        muted={true}
                        ref={videoRef}
                        shouldPlay={true}
                    />
                )}
            </>
        )
    }
    

内容的提问来源于stack exchange,提问作者Kroos

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 18:05:13