Is it possible to build a Videoplayer?

I want to embed the videos from Google Photos.
They should be displayed in a gallery view and then opened as modal and be played if you click on it.
There should be also a possibility to create playlists, so that some videos/audios are automatically played one after another.

And maybe (but i think it’s not possible) to autoplay them in the background if you go into another app.

Do you think that this is possible?
I already tried to embed a video from google photos with the webview component and that worked. (I used publicalbum.org to create a html code for this.)
For the background playing (if it is possible) i have extra mp3 audio files for the music.
(And for the Videos themselves, do you think PiP could be also a feature what users can use?)

1 Like

The WebView component and Open video flow functions are currently what’s available – we hope to get to the point in the backlog that reads “Inline video player component” soon, so stay tuned!

1 Like

Hi @Harri_Sarsa, could you tell if there’s been any update regarding the ‘Inline Video player’ component ?

Thanks.

1 Like

Hi! Unfortunately, there is no update at the moment, as the inline video player component had to be delayed due to other development things taking longer than anticipated.

are there any other possible options to insert your own video into custom player ? for example plyr.io or some other video player ? Just not a built-in one.
Insert this video through code.

Here’s a perfect example of how to do it. In the next 15 days, I have a development order for a mobile app that will have video tutorials and I have to use Adalo instead of Appgyver. That’s too bad. I want your team to evolve to allow us (developers) to insert React native components from GitHub, create custom React Native animations like: Chanel Scroll Animation - “Can it be done in React Native” - YouTube and finally insert embedded video and audio. Please do this as soon as possible.
Sincerely, George.

2 Likes

Hey…
The AppGyver Team said that 3rd party plugins like you’ve said will be supported later this year. It’s a bit of work to built this in…

1 Like

I’m really looking forward to this update.

most of us do (me too), i think. But i think it’s a huge range of work for AppGyver Team to build this in. So we all must be patient…

1 Like

Hi @Harri_Sarsa
Has anything been implemented yet with videos?
just a quick question while building my app(s).

1 Like

Hi! Nothing so far, 3rd party plugin support is still what would be needed.

Hi @Harri_Sarsa, any news on the availablity of the inline video player? really needed :pray:

I figured out a way which works pretty good using iframely api. You just send a post request with the url to the video and they return a custom iframe code which uses helper libraries from their cdn. It renders a high quality react native video player with custom controls, even for youtube videos. Once you have the html, just write to database and use it as the html value of a webview. You can even resize the webview based on the size attributes in the iframe.

2 Likes

Hey everyone I am working on a better solution for this now, if anyone is interested in using it. I set up a basic react native for web video player which plays the video from url provided in query string, and will make it where developers can also pass other info, such video id for view counts, which can then be retrieved with an api call. If anyone wants to use it we can even make it where it would use custom player controls and branding based on the account id passed in url parameter. I want to add video editing capabilities as well. It could be used in appgyver in a webview which would load very fast and show a black screen and spinner for larger videos instantly rather than the ugly empty webview, then load the video with state. Let me know if anybody thinks this would be useful I will make a repository on github for it.

2 Likes

This sounds great! Video is a huge part of our app and we were going to try and code our own solution since Appgyver is still under development.

Ok. I just made a separate project on stackblitz. It only has the boilerplate for now because we need to collaborate on few things. 1) we need to decide to what extent each developer can customize the player using only what we can use in appgyver - url params. 2) we need to allow different formats, such as reels styles recycler view( like this demo I made: https://waggyvere.web.app ), single video, and repeated inline video. I am sure we can all work together to crate a hack which will in all appearances be the same quality as a native player.

Ok I got the demo where it loads the url for the video from params in url. You can check it out here and change the url in the params to try it out. I only have the video controls visible now because all of the other configurations such as custom controls would have to also be specified in url params, including where to autoplay. We can customize the control configurations as well by using templates and passing the template id. This is just a stackblitx demo but once we deploy it to vercel it will load video instantly and we can also configure a cache for each app which uses it.

Preformatted texthttps://react-player-demo-cx1uxr.stackblitz.io/?url=https://res.cloudinary.com/wikacy-com/video/upload/v1642352266/trailers/zeitgeist-trailer_njhtpf.mp4

PAsing the URL works flawlessly right now. The only thing is, as you said, the player controls. Is it currently testable in the WebView component?

1 Like

Tried it in the URL parameter of the WebView component. seems to work well as we can just pass the required video via a formula. Although this only seems to be the case if I encode the data variable as a string: otherwise it crashes the app. Doesn’t make sense to me as to why, but that’s on Appgyver.

Thanks for your efforts and keep us up to date on this, it would be great!

here use this one I just deployed it to firebase for testing. we still have to add the codes needed to pass the options for custom controls.

[https://zeitgeist-network.web.app/?url=https://res.cloudinary.com/wikacy-com/video/upload/v1642352266/trailers/zeitgeist-trailer_njhtpf.mp4]

Its plays youtube a well [https://zeitgeist-network.web.app/?url=https://youtu.be/gorSUDnX1qk]

1 Like

that was probably because it is loading the dev server in the webview. I just deployed a test version to firebase I posted the link below.

1 Like