Cloudflare Developers•8mo ago

I have cache headers from the request on

I have cache headers from the request on a mp4 file:

Cache-Control: max-age=2678400 Cf-Cache-Status: HIT

https://assets.flayks.com/4thsex-screencast.mp4

50 Replies

Unknown User•8mo ago

Message Not Public

flayks•8mo ago

that's what I get from the Network tab

flayks•8mo ago

so I guess ~600ms?

kev-ac•8mo ago

You say there are multiple videos triggered in a short time. Could it be a limit of your browser? For example Chrome allows 6 concurrent HTTP requests for the same domain.

flayks•8mo ago

ah, really? that could explain things. Yes typically the IntersectionObserver is triggering the loading of videos if you scroll fast

kev-ac•8mo ago

https://bluetriangle.com/blog/blocking-web-performance-villain?hs_amp=true

Blocking: The Web Performance Villain

You may not realize it, but your pages may be slowing down due to something that usually flies under the radar. Learn what you can do today about blocking.

flayks•8mo ago

Hm I tried with another CDN provider and its definitely not coming from that so R2 is fine 🤔

flayks•8mo ago

@kev-ac do you see any issues here? I made a little REPL of my usage: https://svelte.dev/repl/e2e81ef4e2aa4380a7043ba439545913?version=4.2.2

Play-pause video playing from viewport visibility • REPL • Svelte

Cybernetically enhanced web apps

kev-ac•8mo ago

I get an 500 error when opening your link

flayks•8mo ago

dammit 🤦 Svelte REPL is down haha actually linked to Cloudflare outage 🤭

kev-ac•8mo ago

They really don't have a good streak right now. 😁 Perfect timing that I just contacted their ENT sales today for a contract. Seems to work again now. Now you just have to tell me what I need to do there. Never worked with svelte before. I see a (recording?) of the website on the right side. But I can't see any playing videos, its just static images.

flayks•8mo ago

Hm weird. It's all videos yes, they should play based on the scroll

kev-ac•8mo ago

Here's a screen recording from what I can see I can see the mp4s being partially fetched from assets.flayks.com, but they don't play. Maybe an autoplay issue? I'm on macOS 14 / Safari 17.0

flayks•8mo ago

I don't see any issue from that first video, it's more when you scroll fast over the other ones But yes essentially that's the whole problem, the videos are not played properly for some reason

flayks•8mo ago

That's what's happening on my end on the website (not REPL but same code essentially)

kev-ac•8mo ago

Could there be an issue in your code that calls pause? Or can you see from the network tab that the playback must be stalling because of a slow download?

flayks•8mo ago

Not sure at this point 😬 all I see is that, nothing happens for like 20sc

kev-ac•8mo ago

Interesting. Looking at the request size. What bytes range is this requesting? 0-1?

flayks•8mo ago

then now:

flayks•8mo ago

No idea, the videos are 15-35mb though, not 300b

kev-ac•8mo ago

You can see it when you click in on the request. Under request headers is the Range header But that being said its rather hard for me to debug it from my side. From what I can see here all videos are fetched as quick as expected.

flayks•8mo ago

So obscure!

kev-ac•8mo ago

Have you tried another browser? Something like Firefox?

flayks•8mo ago

I didn't but just checked and it's all good, so definitely Chrome/ium related 😮 Range: bytes=4974078-

kev-ac•8mo ago

Do you call pause() on the videos once they go out of the viewport? Maybe try commenting it out. Could be a race condition, depending on how you call it

flayks•8mo ago

I tried many things and ended up playing with the promise of play as it is one, it's messy haha

const playPromises = new WeakMap<HTMLVideoElement, Promise<void>>()

const videosDisconnect = inView(sectionEl.querySelectorAll('.video video'), ({ target }) => {
    const video = target as HTMLVideoElement

    // Play the video and store its play promise
    const playPromise = video.play().catch(error => {
        console.error('Error playing the video:', error)
    })

    playPromises.set(video, playPromise)

    return () => {
        // Wait for the play promise to resolve before pausing the video
        playPromise.then(() => {
            video.pause()
            playPromises.delete(video)
        })
    }
}, {
    amount: 0.75,
})

const playPromises = new WeakMap<HTMLVideoElement, Promise<void>>()

const videosDisconnect = inView(sectionEl.querySelectorAll('.video video'), ({ target }) => {
    const video = target as HTMLVideoElement

    // Play the video and store its play promise
    const playPromise = video.play().catch(error => {
        console.error('Error playing the video:', error)
    })

    playPromises.set(video, playPromise)

    return () => {
        // Wait for the play promise to resolve before pausing the video
        playPromise.then(() => {
            video.pause()
            playPromises.delete(video)
        })
    }
}, {
    amount: 0.75,
})

I use inView which is pretty much an IntersectionObserver wrapper

kev-ac•8mo ago

The function returns once it goes out of viewport?

flayks•8mo ago

yes that's it

kev-ac•8mo ago

What's the state of playPromise when you return the video? Can you add a console.log() to the first line in the return function? Something like console.log(playPromise).

flayks•8mo ago

It goes Promise {<fulfilled>: undefined} all the time even though the video freezes/stops sometimes goes Promise {<pending>}

flayks•8mo ago

In this iteration: 1/7 video is stuck (and I scroll back over twice)

kev-ac•8mo ago

Good to see the pending promises. Shows that the play promise has not resolved fast enough when you scroll fast enough. But that shouldn't matter because you wait for the promise to resolve before pausing it.

flayks•8mo ago

Yea that's what I thought too, not an expert about it but it kinda makes sense, it's so tricky 😵‍💫

kev-ac•8mo ago

Shouldn't make a difference but have you tried making it an async function and awaiting the play() promise instead?

flayks•8mo ago

I think inView doesn't like that, I think I tried 😅 or do you mean just the return?

kev-ac•8mo ago

Very dirty idea: Add a setTimeout() for like half a second, just to see if its a race condition.

flayks•8mo ago

went there too 😂 even with a clearTimeout in the return and a time difference to not trigger the play if scrolling too fast It really feels like Chrome is throttling the incoming data for these videos

kev-ac•8mo ago

Very strange bug. What I still don't understand: - It works in Firefox, it doesn't work in Chrome => Indicated browser / implementation bug - It doesn't work in Chrome with R2, It does work in Chrome with another CDN => Indiciates R2 problem

flayks•8mo ago

I tried BunnyCDN as an alternative and it was the same so R2 is not the culprit here

kev-ac•8mo ago

Oh it was the same, then I have misunderstood you there

flayks•8mo ago

will try Safari just for the sake of it 😂

kev-ac•8mo ago

Chrome does do range requests for video files to only fetch as much as needed ahead. But its not really throttling. (But Firefox should do it as well)

flayks•8mo ago

yea all fine on Safari/Firefox. SO strange! my career of bug finder is gonna keep going then haha

kev-ac•8mo ago

Main job description of every developer. But I think sadly I'm of no real help to you here without having more context of the code base, which would go too deep here.

flayks•8mo ago

Oh well don't sweat it hey, chrome users are gonna have to scroll slowly hahaha thank you so much for investigating! 🙏

kev-ac•8mo ago

if ((window.scrollY - scrollY1SecondAgo) > window.innerHeight) { 
  alert("Please scroll slower!"); 
}

if ((window.scrollY - scrollY1SecondAgo) > window.innerHeight) { 
  alert("Please scroll slower!"); 
}

Simple as that

flayks•8mo ago

yes 😂 or worst case scenario I don't do autoplay and click to play to also reduce incoming data, might not be the stupidest idea hey 🤷

kev-ac•8mo ago

If you feel lucky you could use something like Browserstack to test against an old version of chrome if its a new bug.

flayks•8mo ago

might try! thanks

Gaming

Programming

I have cache headers from the request on