Slow loading / buffering when playing Video (MP4) files hosted on Cloudflare R2

[kp1234]

For Workes & Pages, what is the name of the domain?

https://pub-1f78314e4619478ca89481f2867b9235.r2.dev/

What is the issue or error you’re encountering

Slow loading / buffering when playing Video (MP4) files hosted on Cloudflare R2

What are the steps to reproduce the issue?

I am a Laravel developer. I was looking for a low cost solution for hosting and serving videos for a video course that I’m thinking of launching. I found Cloudflare R2 and was excited to get into it (I’m new to course creation and am on a shoestring budget, and Cloudflare has a generous free tier). To get it up and running, I got this working:

Add Cloudflare R2 storage to Laravel in 5 minutes

I was able to implement it without any problems. I am able to upload videos to Cloudflare R2.

However, the problem is that when I try to play MP4 video files in the Chrome browser, it takes a long time to play (because the entire file gets downloaded first). You can try accessing the files directly from the R2 bucket here to see the problem:
210MB video file: https://pub-1f78314e4619478ca89481f2867b9235.r2.dev/alex_test.mp4
(the file above will take a much longer time to load and play)

This is my (rough) code:

routes/web_test_routes.php:
Route::get(‘/test_cloudflare_r2’, function () {
//$url = Storage::disk(‘r2’)->url(‘mystery_test.mp4’);
$url = “https://pub-1f78314e4619478ca89481f2867b9235.r2.dev/mystery_test.mp4”;
return view(‘video-player’, [‘videoUrl’ => $url]);
})->name(‘test_cloudflare_r2’);

resources/views/video-player.blade.php

Is there any code or libraries that can help with this? I heard about this one but I’ve been unable to get it working.
Look up on github: muxinc/media-elements/tree/main/packages/hls-video-element

I want the experience to be snappy.
Any tips or advice?

[sufi]

Have you thought to split the video files into the smaller parts using ffmpeg and then having a m3u8 list for HLS streaming?

Nevertheless, despite I’d suggest using Cloudflare Stream in such case.

[kp1234]

What is the benefit of using Cloudflare Stream? I was thinking of breaking up the MP4 file into smaller chunks, and serving the m3u8 file for HLS streaming, as you suggested.