An interesting way to use Cloudflare R2 in video players with different qualities and hover thumbnai

An interesting way to use Cloudflare R2 in video players with different qualities and hover thumbnails (in the style of YouTube) is by using HLS. In this repository, I made a demo using only Cloudflare R2, and it works wonderfully! https://github.com/fernandodilland/r2-player.js Suggestions or improvements are welcome!

GitHub

GitHub - fernandodilland/r2-player.js: Cloudflare R2 and HLS embedd...

Cloudflare R2 and HLS embedded video player JavaScript library featuring thumbnails, lazy loading, and multiple quality options. - fernandodilland/r2-player.js

FFernando Dilland An interesting way to use Cloudflare R2 in video players with different qualitie...

1984 Ford Laser•11/9/24, 6:59 AM

Very cool! Will definitely take a look, I might have a good use case for this

Anthony•11/9/24, 8:28 AM

Hey guys

I'm new here. I was just wondering if there is a way to restore a R2 database (for example 2 days ago) ?

Anthony•11/9/24, 8:56 AM

R2 are using AWS S3 Buckets under the hood. There's no way to restore an S3 bucket?

Anthony•11/9/24, 8:59 AM

Got it, thanks

Anthony•11/9/24, 9:02 AM

Yeah I'll look at something

fry69•11/9/24, 9:02 AM

That said S3 seems to have some kind of versioning extension built-in -> https://docs.aws.amazon.com/AmazonS3/latest/userguide/Versioning.html

Retaining multiple versions of objects with S3 Versioning - Amazon ...

Use versioning in Amazon S3 to keep multiple variants of an object in the same bucket.

fry69•11/9/24, 9:04 AM

It should be possible to create similar versioning with R2 and the tools available, just not an out-of-the-box service

11984 Ford Laser Very cool! Will definitely take a look, I might have a good use case for this

Fernando DillandOP•11/9/24, 11:25 PM

I learned how to publish the library on NPM. In case it’s helpful, here’s the link: https://www.npmjs.com/package/r2-player.js

npm

r2-player.js

Video player based on files in a Cloudflare R2 bucket, featuring video thumbnails, lazy loading, and multiple quality options.. Latest version: 1.1.1, last published: 21 minutes ago. Start using r2-player.js in your project by running

npm i r2-player.js

npm i r2-player.js

. There are no other projects in the npm registry using r2-player.js.

Ir Zanaj•11/10/24, 7:58 AM

Does R2 offer signed url?

IIr Zanaj Does R2 offer signed url?

fry69•11/10/24, 8:00 AM

Like this? -> https://developers.cloudflare.com/r2/api/s3/presigned-urls/

Cloudflare Docs

Presigned URLs | Cloudflare R2 docs

Presigned URLs are an S3 concept

for sharing direct access to your bucket without revealing your token secret. A presigned URL authorizes anyone with the URL to perform an action to the S3 compatibility endpoint for an R2 bucket. By default, the S3 endpoint requires an AUTHORIZATION header signed by your token. Every presigned URL has S3 param...

Nguyen Huu phuc•11/10/24, 10:26 AM

I created a bucket, but i don't see tab Access Keys

Nguyen Huu phuc•11/10/24, 10:26 AM

help me, please

Nguyen Huu phuc•11/10/24, 10:29 AM

Nguyen Huu phuc•11/10/24, 10:30 AM

create API token ?

Nguyen Huu phuc•11/10/24, 10:30 AM

Nguyen Huu phuc•11/10/24, 10:31 AM

Is this correct, sir?

Nguyen Huu phuc•11/10/24, 10:37 AM

thank you so much, i'm done

Nguyen Huu phuc•11/10/24, 11:54 AM

I got this error when I sent a link to my friend to see photos on r2

Nguyen Huu phuc•11/10/24, 12:06 PM

how to use, thanks for helping me

Đăng Tú•11/10/24, 12:34 PM

Could you confirm if this is bug? If I use the endpoint create by API, it will create

content-disposition

content-disposition

properly. But if I use custom domain endpoint, it only delivery the file, the http header will not be generated like in the screenshot. If it is not a bug, could you tell me how to inject

content-disposition

content-disposition

in the right way?

Đăng Tú•11/10/24, 12:39 PM

Thanks, but do we have other options to set filename for download link using custom domain?

Đăng Tú•11/10/24, 12:56 PM

Also where can I read more about this?

._.•11/10/24, 3:50 PM

Can anyone give me a working answer? Why is it stuck on cors localhost even though I set cors to use * in all cases?
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(

Failed to load image: ${response.status} ${response.statusText}

Failed to load image: ${response.status} ${response.statusText}

);
}
const blob = await response.blob();
return await new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = () =>
reject(new Error("Failed to read blob as data URL"));
reader.readAsDataURL(blob);
});
} catch (error) {
throw new Error(

Failed to load image: ${error.message}

Failed to load image: ${error.message}

);
}
}

Flare•11/10/24, 7:18 PM

Troubleshooting 403 / CORS issues with R2

So, your assets aren't loading because you are getting a CORS error despite having setup everything correctly?
Let's try troubleshooting.

In your browser console, do you see a 401/403 error right above the CORS error? If yes, then you aren't actually dealing with a CORS issue! If you do have a CORS issue, head to the last section.

If you are using a Custom domain

Go to the Network tab and find the failing request (you may need to reload the page, since only requests after opening the developer tools are logged).
You need to check the response headers for the following two headers:

```
cf-cache-status
```
```
cf-cache-status
```
```
cf-mitigated
```
```
cf-mitigated
```

### If you have a

cf-mitigated

cf-mitigated

header

Your request was blocked by one of your WAF rules. Go to Security Events and look for what service blocked your request.

If you don't have a

cf-cache-status

cf-cache-status

header

Your request was blocked by Hotlink Protection.
Go to your dashboard and disable it or write a configuration rule to only disable on your Custom domain

If you are using the S3 API

Your request is very likely incorrectly signed.
Try executing the request via curl to inspect the real response returned by the S3 api and then tackle that issue.
Once your request is correctly signed, you'll receive the proper CORS headers.

If it's actually CORS

Here are some common issues with CORS configurations:

```
ExposeHeaders
```
```
ExposeHeaders
```
is missing headers like
```
ETag
```
```
ETag
```

AllowedHeaders

AllowedHeaders

is missing headers like

Authorization

Authorization

Content-Type

Content-Type

AllowedMethods

AllowedMethods

is missing methods like

POST

POST

PUT

PUT

(you do not need to include

OPTIONS

OPTIONS

)

boldpix•11/11/24, 12:56 PM

hi

I want to use the free version of R2. Do I still need to enter my bank or PayPal account information?

Bboldpix hi I want to use the free version of R2. Do I still need to enter my bank or Pa...

Isaac McFadyen•11/11/24, 12:58 PM

Yes. It's required to help prevent abuse.

Original message was deleted

boldpix•11/11/24, 1:03 PM

This will be problematic for those living in countries where international bank accounts are not available, especially since they only want to use the free version and Cloudflare may limit their account if their bandwidth increases.

boldpix•11/11/24, 1:05 PM

Can anyone recommend a free cloud storage service that doesn't demand bank details for initial signup and is actually free to use?

Original message was deleted

boldpix•11/11/24, 1:20 PM

Thanks bro, but my problem is that I don't have access to any of these payment providers

Original message was deleted

boldpix•11/11/24, 1:57 PM

Bboldpix This will be problematic for those living in countries where international bank ...

Zora•11/11/24, 1:59 PM

Cloudflare won't limit you for using r2

ZZora Cloudflare won't limit you for using r2

boldpix•11/11/24, 2:00 PM

I Know

boldpix•11/11/24, 2:02 PM

Can anyone recommend a free cloud storage service that doesn't demand bank details for initial signup and is actually free to use? Please send me in Direct message

RoyalFlashhh•11/11/24, 3:26 PM

Hello guys, do you have any idea why the cache doesn't work? I've got a bunch of small images stored in R2 and displayed on my website. I have a Cache rule set, but there are still a lot of Class B operations.

RoyalFlashhh•11/11/24, 3:31 PM

from 10kb to 1mb

RoyalFlashhh•11/11/24, 3:36 PM

Not sure if I can filter by hostname. But this screenshot for whole website

Original message was deleted

RoyalFlashhh•11/11/24, 4:01 PM

I just thought if I set cache to 1 year then there shouldn't be any Class B operations. Thanks anyway

Deleted User•11/11/24, 4:02 PM

does anyone know what the issue here is general-helpCloudflare R2

Deleted User•11/11/24, 4:02 PM

i can’t fix it

Flare•11/11/24, 4:02 PM

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

```
cf-cache-status
```
```
cf-cache-status
```
```
cf-mitigated
```
```
cf-mitigated
```

### If you have a

cf-mitigated

cf-mitigated

header

Your request was blocked by one of your WAF rules. Go to Security Events and look for what service blocked your request.

If you don't have a

cf-cache-status

cf-cache-status

header

Your request was blocked by Hotlink Protection.
Go to your dashboard and disable it or write a configuration rule to only disable on your Custom domain

If you are using the S3 API

If it's actually CORS

Here are some common issues with CORS configurations:

```
ExposeHeaders
```
```
ExposeHeaders
```
is missing headers like
```
ETag
```
```
ETag
```

AllowedHeaders

AllowedHeaders

is missing headers like

Authorization

Authorization

Content-Type

Content-Type

AllowedMethods

AllowedMethods

is missing methods like

POST

POST

PUT

PUT

(you do not need to include

OPTIONS

OPTIONS

)

Original message was deleted

RoyalFlashhh•11/11/24, 4:03 PM

Thanks for the explanation

Original message was deleted

Deleted User•11/11/24, 4:09 PM

oh my god thank you

Deleted User•11/11/24, 4:09 PM

i had a rule that was blocking cdn

Rakhim•11/11/24, 4:44 PM

I'm using R2 to serve images uploaded by users of my app. I'm tempted to disable public access to the R2 bucket, and serve images via worker. I'm wondering if there are downsides to this? Would it significantly worsen the performance due to worker invocation? What's the general good practice when using R2-files to the public?

Original message was deleted

Rakhim•11/11/24, 4:55 PM

My users have accounts at subdomain.domain.com, and I’d like their images to appear to be served from their subdomains, rather than from the central assets.domain.con

Original message was deleted

Rakhim•11/11/24, 4:57 PM

Create a bucket per user? Hmm.. maybe. I’d have to check on limits. I don’t know yet how many users I’ll have, could be thousands.

An interesting way to use Cloudflare R2 in video players with different qualities and hover thumbnai

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you are using the S3 API

If it's actually CORS

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you are using the S3 API

If it's actually CORS

Similar Threads

Similar Threads

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you are using the S3 API

If it's actually CORS

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you are using the S3 API

If it's actually CORS

Similar Threads

An interesting way to use Cloudflare R2 in video players with different qualities and hover thumbnai

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a cf-cache-statuscf-cache-status header

If you are using the S3 API

If it's actually CORS

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a cf-cache-statuscf-cache-status header

If you are using the S3 API

If it's actually CORS

Similar Threads

Similar Threads

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a cf-cache-statuscf-cache-status header

If you are using the S3 API

If it's actually CORS

Troubleshooting 403 / CORS issues with R2

If you are using a Custom domain

If you don't have a cf-cache-statuscf-cache-status header

If you are using the S3 API

If it's actually CORS

Similar Threads

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you don't have a
`cf-cache-status`
`cf-cache-status`
header

If you don't have a
`cf-cache-status`
`cf-cache-status`
header