Is it possible to build a Videoplayer?

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

if we use light mode we can also pass a poster image. i will also try to install the react lazy loading package to try to speed up the actual loading of the page. we need to get that period of blank webview down to a minimum. you all are welcome to play with it on stackblitz

we could also implement dynamic resizing of the video element and the wrapper container, ratio , based on the info returned from the react media elements getWidth(), etc, callbacks. Even as of now, it looks way better because I have the playback speed, chrome cast, and other options disabled. Another thing we should implement is all the various attributes for all the different players from youtube, facebook, etc, and allow the passing of facebook app id, etc. Heck, we could even implement video monetization and control an ad server all within the params of the url. For example, say the owner of the appgyver app sets up an account and passes a parameter like “playad_first” or “playad_last” along with his/her api key. Our code could use those params to play and log the play to the account. We could even provide a dashboard for analytics. Just ideas.

we could even make a version with controls for swipe to next video and allow passing multiple urls

I myself couldn’t do much with it, but I’ll get my partner to look, much appreciated. And you were correct about the crashing!

1 Like

Those are pretty ambitious ideas.! I’m sure plenty of people here would be more than grateful for whatever you land on. Personally, I’m building the media backend on Azure, so analytics would be covered.

Hey just to update everyone I am in the process of building another video player with a custom adaptive bitrate streaming profile specifically for appgyver webviews. Cloudinary is helping me because they believe by using a handshake we can get the videos to play almost like a native player. I will paste link when ready to test.