Showing video from Firebase

Ionic Framework ionic-v3
1

I’m having trouble playing back the videos from Firebase Storage.
I’m getting downloadURL from Firebase ok, and putting it to the video tag. Thumbnail is shown, but playback doesn’t work. I’ve checked downloadURL, it’s correct, the video is there and permissions are off. I’m sure it’s something wrong on the frontend, any advice will be highly appreciated!

<video webkit-playsinline="true" class="videoLandscape" #trimVideo poster="{{tempVar2}}" src="{{tempVar}}"></video>

2

  1. Is this on browser or device?

  2. If device, is it the same device you recorded the video on, or a different one? This matters because of possible codec issues.

  3. Can you see the poster?

  4. Does it work if you just use <video autoplay [src]="tempVar"> ?

1 Like
3
  1. Both, in Browser, I don’t even see the “play” overlay, on device I see it, but it’s unclickable.
  2. Same device, but sourcing the video from Firebase. I’ve recorded on my device, uploaded to Firebase, now wanna display it back again.
  3. I can see the poster photo perfectly
  4. autoplay - works in Browser, but no play/stop controls. Doesn’t work on Device, even shows a “cross” over the play overlay (like the video isn’t there or is broken).

Thanks!

4

As a temporary fix in the browser, you could use <video controls [src]="tempVar"> if you need controls. I’ve been able to use the HTML video tag in Android apk’s with Firebase videos, again, as a temporary fix. With iOS, you might need a Cordova plugin of some sort, it seems more strict about playing media.

The biggest issue here, though, is that Firebase isn’t intended as a video backend. Have you seen this StackOverflow comment? It’s the reason I only store <10 second videos in Firebase.

1 Like
5

Thanks! controls works well, and now I’m getting playback in the browser! But not yet on the device, I’m on iOS.

I’m having troubling following what he’s suggesting there…
I’ve never come across videoViewLandscape for instance, what plugin do I need to use? Is this only for Android?
Thanks!

6

He’s talking about realtime video, or quasi-realtime like YouTube, where the recording exists, but you can start watching before the download ends. If you’re willing to have the user wait until an entire video is downloaded before it starts, then you might not have to worry about it, but of course that’s not the ideal user experience.

This is where my knowledge gets vague. My attitude has been: make sure the videos play in alpha and early beta, then build a more robust solution after that. So I’ll hopefully know the answer in about a month, but I’ve been putting it off on purpose because I think it’s going to be hard. If you get there ahead of me, please let me know.

1 Like
7

I just want to have any kind of playback, even if the user has to wait for the whole video to load (sure, that’s not ideal in terms of user experience).

Do I need to do something maybe with this.transfer.create() ?
What do you think? Like download it in the background to the user’s phone and then link the local URI to the video tag?

8

I don’t know. I’m cautious about a strategy that prefetches something large, because I don’t know whether device A will execute it in the background, while device B locks everything up. There’s a preload option in the HTML video tag. You could play with that as a first step. I think it really depends on who your users are going to be, and what their playback environment is going to be.

1 Like