expo: [expo-av] videoplayer isLooping not working on iOS stops after 3 plays

🐛 Bug Report

Summary of Issue

Hey, i am using expo video player on a bare react native app.

I got a newsfeed build with react native snap carousel, inside there are my activities (media with text).

The expo video component has isLooping but it does not work as exspected on iOS. While Android works fine!

Environment - output of `expo diagnostics` & the platform(s) you’re targeting

Expo CLI 3.21.5 environment info: System: OS: macOS 10.15.6 Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.18.1 - /usr/local/opt/node@10/bin/node Yarn: 1.22.0 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/opt/node@10/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman IDEs: Xcode: 11.6/11E708 - /usr/bin/xcodebuild npmPackages: expo: ^38.0.8 => 38.0.8 react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 react-navigation: ^4.4.0 => 4.4.0 npmGlobalPackages: expo-cli: 3.21.5

iOS 13.6

Reproducible Demo

const uri = some Video url;
<Video
                    ref={ref => (this.video = ref)}
                    source={{
                        uri: uri,
                    }}
                    rate={1.0}
                    volume={1.0}
                    isMuted={false}
                    resizeMode="cover"
                    onPlaybackStatusUpdate={this.onProgress}
                    onError={() => console.log('error')}
                    isLooping
                    shouldPlay
                    useNativeControls={false}
                    style={{
                        flex: 1
                    }}
                />

Steps to Reproduce

Build a new Component with the expo video component in it. Set isLooping.

Wait for 3 Playbacks.

Video status -> isLoaded: false -> Video stops playing

Expected Behavior vs Actual Behavior

Video should loop infinitely.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

you can replay using videoRef every time status.didJustFinish return true

` const video= useRef(); const [status, setStatus] = useState();

useEffect(() => { (async () => {

 if (status.didJustFinish) {
  await video.replayAsync(); 
 }

})();

}, [status]);

return ( <Video ref={ref => (this.video = ref)} source={{uri: }}
style={{height:screenHeight}} resizeMode=“contain” onPlaybackStatusUpdate={status => setStatus(() => status)} shouldPlay={screenIsFocused} isLooping /> ); `

samiklah on Sep 17, 2021

Hi! I’ve confirmed that this problem happens when using .m3u8 files. When the playback ends, it should rewind the AVPlayerItem and re-add it to the queue. However, for .m3u8 files, the call to seekToTime never call its completion callback after the AVPlayerItem has reached the end.

https://github.com/expo/expo/blob/a34fe91fbb8edb3cd38caed3e7b20bd35f68de70/packages/expo-av/ios/EXAV/EXAVPlayerData.m#L764-L771

L765 never gets called for m3u8 files

This appears to be a bug in iOS rather than expo-av. I’ll have a closer look to see whether we can find a workaround for this.

IjzerenHein on Oct 7, 2020

In a brand new React Native project it seems to work. Unfortunately, my actual project is so big that it will be difficult to reproduce the whole thing.

I’ve switched to react-native-video for the time being, as it works fine with it.

I will try to get to the bottom of this and get back to you.

borstessi on Aug 7, 2020