Expo.Video component is not rendered

Expo SDK
1

Here’s a code from my render method.

<Video
	source={{
		uri: "https://www.w3schools.com/html/mov_bbb.mp4"
	}}
	rate={1.0}
	volume={1.0}
	isMuted={false}
	resizeMode="cover"
	shouldPlay
	style={{
		width: 300,
		height: 300
	}}
	onReadyForDisplay={params => {
		console.log(params);
	}}
	onLoadStart={() => {
		console.log("start");
	}}
	onLoad={() => {
		console.log("loaded");
	}}
	onError={() => {
		console.log("error");
	}}
/>

The output I get when running is

23:29:50: start
23:29:50: loaded

Sometimes it’s rendering and I get

23:18:27: start
23:18:27: loaded
23:18:27: Object {
23:18:27:   "naturalSize": Object {
23:18:27:     "height": 176,
23:18:27:     "orientation": "landscape",
23:18:27:     "width": 320,
23:18:27:   },
23:18:27:   "status": Object {
23:18:27:     "androidImplementation": "SimpleExoPlayer",
23:18:27:     "didJustFinish": false,
23:18:27:     "durationMillis": 10026,
23:18:27:     "isBuffering": true,
23:18:27:     "isLoaded": true,
23:18:27:     "isLooping": false,
23:18:27:     "isMuted": false,
23:18:27:     "isPlaying": false,
23:18:27:     "playableDurationMillis": 9536,
23:18:27:     "positionMillis": 0,
23:18:27:     "progressUpdateIntervalMillis": 500,
23:18:27:     "rate": 1,
23:18:27:     "shouldCorrectPitch": false,
23:18:27:     "shouldPlay": true,
23:18:27:     "uri": "/html/mov_bbb.mp4",
23:18:27:     "volume": 1,
23:18:27:   },
23:18:27: }

But after changing something in file I get again:

23:18:27: start
23:18:27: loaded
2

Hey there @nedelev - sorry you’re having trouble with this. Assuming you’re having trouble on Android? Could you provide more information about the device you’re running this on? Pinging @sjchmiela for his expertise here.

3

Hello @nedelev! Is it a development-only problem (does it occur only while you’re developing your application) or does it happen also in production? Does the full reload of the experience help (button in the sticky notification)? Does it happen only on Android or does it happen also on iOS?

4

One Plus 5. Android 8.0.0 Oreo
@sjchmiela
It’s a development only problem.
And the full reload doesn’t help.
I haven’t testes it on iOS.

5

Hm, could you provide us with a Snack demonstrating the issue?

I’ve used https://snack.expo.io/HJ9WNn6rf and it was working properly (even after 10 reloads triggered by me changing isMuted={true,false}).

Also, I noticed there is a this.videoRef.playAsync(); in onLoad, while you have no ref property on the Video component. It may result in an error. :slight_smile:

6

I forgot to remove this line when I was writing about this issue. I will edit it.
I’ve had a reference to Video object ref={ (v) => {this.videoRef = v} }
I played around and I tried to use this.videoRef.playAsync() in onLoad callback but it didn’t work.

There’s no error when I use Snack.

It’s only when I use Expo Client and I don’t have it every time. I couldn’t track a reason of it. I used same code and sometimes the video is loaded sometimes it’s not.
I thought that it could be related to CORS policy but I suppose it’s not since onLoad() callback is working.

I thought that I should restart app using exp start but it didn’t work as well.
And after re-saving application a couple of times it worked. With same code as it’s been before. But it’s stopping rendering after I make some changes. And it’s not working after I undo all of the changes and save.

And there’s no console error. There are always those lines

23:18:27: start
23:18:27: loaded

But it’s not logging console.log(params);

I’ve tried different videos and there’s still some problem. .onReadyForDisplay() is not been executed sometimes.

I’ll try to run it on a couple different devices and to track a problem.

7

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.