Plyr video component

Get Help
21

So what should I do???

22

Like already suggested. You can ONLY do this via the way outlined in this tutorial: How to Embed Video or Audio (YouTube, Vimeo, SoundCloud) - Adalo Resources

1 Like
23

I am not talking about web view I am asking about video player component of marketplace

24

I’m not sure how I can be more clear.

Using vimeo links in the video player component from the marketplace will not work. Only .mp4 files are accepted on that component.

The only way to get vimeo videos to play in Adalo is through the webview component.

2 Likes
25

So please tell me that what kind of links work in video player.

26

Hi there. As mentioned the only way to use a vimeo link would be to use the webview and have the embeded link. If you are wanting to use a file or a URL with the file extension at the end then you will need to have the raw video file and then using a file picker on a screen you can upload the file into the database and have it dynamically played in the plyr component. If the file is over 50MB you will not be able to upload it using the file picker and will need to find a source like Amazon S3 or one of many others that will allow you to create a URL with the file extension which you can then input into the database through the editor.

1 Like
27

did you solve this problem? i have same problem with this :frowning:

28

failing to solve the problem, I tried only the .mp4 link, and all attempts were unsuccessful

29

Hello everyone,

We built out this component, so let me dive into that topic, please.

At first, thank you for pointing this issue out and sorry for this inconvenience.
I’ve overlooked that topic.:eyes: Thanks to one of the Adalo users that sent a message with the link to this topic.

We already received a couple of reports about this issue in the past via email, WhatsApp, and Slack (Adalo workspace). I provided information that helps to fix that issue. Let me attach the same details here.

Please have a look at the following screenshot:

image
image2288×1000 158 KB

So, you should have this kind of error here. That’s why you cannot play video.

Access to video at 'https://$website$.s3-ap-southeast-2.amazonaws.com/$folder_name$/$file_name$.mp4' from origin 'https://app.adalo.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access-Control-Allow-Origin:
It would help if you whitelist Adalo’s domain name:
https://*.adalo.com/*

Also, if you attach your custom domain, please whitelist it as well.

If you use S3 service, the following article may help you to get more details:

If you use another host service, you also should be able to whitelist it.

Let me know if you have any questions, please.

Cheers!

2 Likes
30

Can you please make a helpfull video on it please

31

That’s a good idea!
Unfortunately, we have little time, so we cannot work on this now.

I’m sure you can find more info via Google since there are many helpful articles and videos.

32

I have no idea what to do with this info honestly. Are you able to give use instructions?

All we want to do is post a video URL and it plays

33

this is the JSON code i’ve tried
this works well for me though
copy these and paste them on CORS setting

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "https://app.adalo.com/*"
        ],
        "ExposeHeaders": [
            "Accept-Ranges",
            "Content-Range",
            "Content-Encoding",
            "Content-Length",
            "Access-Control-Allow-Origin"
        ]
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT"
        ],
        "AllowedOrigins": [
            "https://previewer.adalo.com/*"
        ],
        "ExposeHeaders": [
            "Accept-Ranges",
            "Content-Range",
            "Content-Encoding",
            "Content-Length",
            "Access-Control-Allow-Origin"
        ]
    },
    {
        "AllowedHeaders": [
            "Origin",
            "Content-Length",
            "Content-Type",
            "Content-MD5",
            "X-Amz-User-Agent",
            "X-Amz-Date",
            "Authorization"
        ],
        "AllowedMethods": [
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "https://app.adalo.com/*",
            "http://app.adalo.com",
            "https://app.adalo.com"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 1800
    },
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 1800
    }
]
34

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