TheWidlarzGroup / react-native-video

A <Video /> component for react-native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[BUG]: [Android] When multiple videos, only the last is playing

fabienbouchez opened this issue · comments

Version

6.1.2

What platforms are you having the problem on?

Android

System Version

Android 14

On what device are you experiencing the issue?

Real device

Architecture

Old architecture

What happened?

Hello,

On android, If 2 or more videos are displayed, only the last one is playing.
This behaviour does not happen for iOS where all the videos are playing at the same time.

Could you help ?

Reproduction

repository link

Reproduction

"react": "18.2.0",
"react-native": "0.74.1",
"react-native-video": "6.1.2"

Here is how to reproduce :

import React from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';



function App(): React.JSX.Element {
 return (
   <View  style={{flex:1}}>
    <Video
       source={{ uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8' }}
       onBuffer={(onBuffer) => console.log('video1  onBuffer', onBuffer)}
       onError={(onError) => console.log('video1 onError', onError)}
       onPlaybackStateChanged={(onPlaybackStateChanged) => console.log('video1 onPlaybackStateChanged', onPlaybackStateChanged)}
       style={{flex:1}}
     />
     <Video
       source={{ uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.mp4/.m3u8' }}
       onBuffer={(onBuffer) => console.log('video2  onBuffer', onBuffer)}
       onError={(onError) => console.log('video2 onError', onError)}
       onPlaybackStateChanged={(onPlaybackStateChanged) => console.log('video2 onPlaybackStateChanged', onPlaybackStateChanged)}
       style={{flex:1}}
     />
   </View>

 );
}

export default App;

Corresponding logs (video 1 never goes to onPlaybackStateChanged {"isPlaying": true})

 LOG  Running "reactNativeVideoTest" with {"rootTag":71}
 LOG  video1  onBuffer {"isBuffering": true}
 LOG  video2  onBuffer {"isBuffering": true}
 LOG  video1  onBuffer {"isBuffering": false}
 LOG  video2 onPlaybackStateChanged {"isPlaying": true}
 LOG  video2  onBuffer {"isBuffering": false}
 LOG  video2 onPlaybackStateChanged {"isPlaying": false}

I think you have audio focus issue, please check : disablefocus prop

Indeed, this solves the problem. Thank you.