I want to update source(video url) on my react native app

Product

Player

Question

player.load({
url: channelData.url,
type: SourceType.HLS,
title: channelData.name,
metadata: { platform: Platform.OS },
});
It’s my code base.

I am working on a react-native app and need to update the URL. It is now hooked with useEffect() but the player is stopped after an update of the state.

I hope you guide me for update of source

Thank you.

Hi @fulldev0526 !

Usually calling player.load() inside of useEffect() works as long as all the used variables/parameters are part of the useEffect’s dependencies array.

If you update the URL and a new load of player.load() happens, the player is meant to be stopped, as any call to player.load() means resetting internal state of the player and load the given source.

One source of an unwanted call might happen in case channelData changes but the url property doesn’t.

In this case you have to separate state, at least locally, by capturing channelData.url and channelData.name outside of the useEffect in local variables and use them for the useEffect’s dependencies.

Like:

const channelUrl = channelData.url
const channelName = channelData.name
useEffect(() => {
  player.load({
    url: channelUrl,
    type: SourceType.HLS,
    title: channelName,
    metadata: { platform: Platform.OS },
  });
}, [player, channelUrl, channelName]);

I hope this helps!

Can we book a quick call today?

Unfortunately we cannot offer a call.

Did you try the proposed solution?

You can also browse our open source example application here: bitmovin-player-react-native/example at development · bitmovin/bitmovin-player-react-native · GitHub

No worries. But could you clarify why it happened?