PLYR component + Amazon S3 Youtube Video

Hi all! I’ve made a video on configuring Amazon S3 buckets so the MP4 file works with PLYR Video. Enjoy.

Note: If someone with more experience with security settings can check the video please let me know if I’ve configured it correctly as I don’t want to lead anyone astray!

11 Likes

Hello @theadaloguy!

Thanks for preparing this lovely tutorial for our component!

BTW, I attached the code source of the component:

File:
//s3.amazonaws.com/appforest_uf/f1611698399080x447157099374699800/plyr-video.zip

2 Likes

Thank you so much for making this video, such a great resource for the entire community.

1 Like

Comment, Question, and an Issue/bug:

  1. Thanks for making this PLYR video component. It is pretty awesome.
  2. Question: Will having users upload video to my Adalo DB make my app slow? Is that the reason for the Amazon Bucket? To pull from a different CDN instead of pulling from the app?
  3. I think there is a bug/issue I am encountering. I am wanting the video to show the thumbnail picture of the user’s profile pic, instead of the first frame of the video. The option for this exists in the player… it’s just not working.
1 Like
  1. The main reason I used the Amazon bucket was limited file upload size in Adalo. I don’t know if it would slow down the app, maybe not, but it would also put you towards your database size limit.

  2. I didn’t try to change the thumbnails but maybe @lottemint can help with that.

Hi everyone!

I’m playing around with the component here, and just to be sure… the plyr only works with aws server?
I have tried some videos uploaded to Dropbox with .mp4 extension but with no success yet.

And the file uploader from Adalo it’s not working with videos. Even with an Admin screen with form file picker to upload the videos.

Thanks for your help!

2 Likes

Other servers work if you can configure them properly.

However I’m not sure it can be done with Dropbox or Google drive, I don’t think they have the advanced settings needed.

I found a solution for this!
If anyone bumps with this problem with CORS permissions, some cloud storage services have a specific URL to allow public permissions.

In the case of Dropbox you can use this: https://dl.dropboxusercontent.com/{your-file}
And then call the url with magic text to the plyr comp.

Maybe not the best option but works for now.
Hope this helps someone!

2 Likes

Hi all,

I need your help on PLYR, I finished to build my app but I am facing issue to play video when I install app on my phone. I am using AWS for large file as “theadaloguy” explained in his video. All works online or preview but not with APK (publish app). Did you have the same issue ? I used domain on the screenshot.

image
image

Thank you

Regards

Hello @theadaloguy
Thank you for your guide.
I was able to reflect my video using the method of your youtube video. However, when I press the play button, I hear the audio, but no video and it blacks out.
Can you tell me what is causing this?

That is very strange. If you copy the URL of the video, and play it in your browser, is it the same? What is the file format?

Yes. The file format is mp4 and mov.
When I tried open URL by Safari, I could see my movie.
But when I opened by Chrome, I couldn’t see my movie(only sound).
I’d like to open Chrome.
What do you think about the cause?

I think .mov might have issues and mp4 will be fine. Can you confirm that’s the case?

I couldn’t open mp4 file on Chrome, too.

Sorry, didn’t see the solution in the comments on youtube:
Somehow when copy pasting something goes wrong even when it looks correct. I copied it to JSON Formatter & Validator and then manually changed the “”, processed it via that site. Then copied and pasted into AWS s3 and now it works (bucket policy, cors also added and playing the video with plyr).

1 Like

It’s a very weird issue when pasting into Adalo. Glad you managed to find the solution.

1 Like

Hi,

I’m using your bucket policy & CORS in one of my client projects. But when I installed the final build on both devices I have via the App store & play store. Audio & videos are not playing is that something which may be a restriction from AWS? Have you encountered this type of bug before?

One update - When I’m uploading the video/audio directly to the adalo database its playing in final build.

Looking forward to your reply.

Thanks

Right now the CORS policy is set up to accept requests from an Adalo PWA. To make this for an app, this simplest way is to accept requests from anywhere (make it public).


It’s been a while since i’ve done anything with S3 / PLYR so let me know how you get on.

Hi @theadaloguy ,

Its already disabled →

Hi @theadaloguy ,

I’m still looking forward to your answer.

Thanks