Video loading delay

Website, Application, Performance
1

What is the name of the domain?

authoredup.com

What is the issue you’re encountering

Occasionally, HTML5 video would take 5+ seconds to start playing. Once it gets going, it works fine.

What steps have you taken to resolve the issue?

Here are the response headers:

age:
1681
alt-svc:
h3=":443"; ma=86400
cache-control:
max-age=14400
cf-cache-status:
HIT
cf-ray:
8f9a1c76bedcb348-PRG
content-length:
31279131
content-range:
bytes 0-31279130/31279131
content-type:
video/mp4
date:
Sun, 29 Dec 2024 13:24:35 GMT
etag:
"677146ea-1dd481b"
last-modified:
Sun, 29 Dec 2024 12:56:10 GMT
nel:
{"success_fraction":0,"report_to":"cf-nel","max_age":604800}
priority:
u=3,i
referrer-policy:
no-referrer-when-downgrade
report-to:
{"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=Imk5NdtnCnHpwb25Hn2FEZibTJp49X%2BLQ8RTl6CMHT1uhX2qguuCCEyO%2B5ItjIxVjScwrLNrI0SXFAuW1NxZZRFr1BebY1om48qQogLOUfRRgvdKw5p%2BEJETQY%2BSmcdP2iWQlqzYaw%3D%3D"}],"group":"cf-nel","max_age":604800}
server:
cloudflare
server-timing:
cfL4;desc="?proto=QUIC&rtt=25532&min_rtt=18405&rtt_var=3187&sent=88985&recv=22047&lost=14627&retrans=14305&sent_bytes=105882300&recv_bytes=1118805&delivery_rate=12562772&cwnd=406068&unsent_bytes=0&cid=54c069c899262167&ts=158741&x=1"

server-timing:
cfExtPri
server-timing:
cfHdrFlush;dur=9986
strict-transport-security:
max-age=31536000; includeSubDomains; preload
vary:
Accept-Encoding
x-content-type-options:
nosniff
x-xss-protection:
1; mode=block

So it seems like there was an internal packet loss that caused a 10 sec delay (cfHdrFlush;dur=9986)?

I tried switching off QUIC, but it didn’t help.

2

May I ask if those are from an MP4 (or some other video format) file which was loaded over a proxied :orange: hostname? :thinking:

3

Yes, it was an MP4 onboarding video, played via HTML5 video element

4

Thank you for feedback.

I ask because I saw you’ve switched or decided to go with embeded YouTube from the above shared domain name, as far as I understand it’s the issue for you.

May I ask how large (filesize) was the video?
Was it only one or you’ve had multiple on the page?
Was it implemented and using “preload” and “autoplay” attributes?

Nevertheless, from my experience, videos larger than 45MB (needs to be downloaded even for the bots crawling your website), the best case is to:

  1. Split video into the chunks (smaller files such as .ts with ffmpeg on the server) and load it from .m3u8 list, all that you can upload and then serve from Cloudflare R2 bucket using custom domain such as videos.mydomain.com/path-to-the-m3u8
  2. Serve the video over HTTPS (e.g. different web hosting such as cPanel) but from an unproxied :grey: (DNS-only) sub-domain such as video.example.com
  3. Use Cloudflare Stream for such case
  4. Embed over a 3rd-party service
5

It’s about 150MB, single file. Only one video playing at a time. The video is still not live, I was testing from a dev environment.

Thank you for the suggestions.

6

Yes, that might be the case as it’s being downloaded but even as cached, it needs time to download, then encode, then it’s loading … However possibly with that usage, you’d end up having a black screen stating you’re violating the Cloudflare Terms of Service as well. If that happens, then for sure you either go with one of the above suggestions.

Example:

stream.png
stream.png640×480 12.8 KB

Helpful article:

More information:

Terms of service:

7

I misunderstood CF rules. Thought they forbid proxying “large files LIKE videos unless mixed content”. In fact they forbid proxying “large files unless mixed content AND videos”.

My solution for now:

  • switch CF to only doing 302 redirects
  • serve videos directly from S3
  • optimize files themselves to be smaller
    This seems to solve my issue.

Longer term, if I end up relying more on videos, I might switch to the playlist setup.

Thanks @fritex

8

This topic was automatically closed after 15 days. New replies are no longer allowed.