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,但本次无此类触发条件。
附使用的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
相关产品推荐
相关产品推荐

