video causes "Blocked attempt to create a WebMediaPlayer"
Answered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
What can cause this issue? The video that causes it is in hero section which is a part of RSC (page.tsx)
<video
autoPlay
className="absolute inset-0 z-0 size-full object-cover xl:static xl:w-1/2"
loop
muted
playsInline
poster={poster}
>
<source src={video} type="video/mp4" />
Video is not supported.
</video>Answered by Nuitari
ok this is how i debug stuff mostly simplify things create a branch (for copy the main or for make the changes and try deploy it) remove anything in layouts except html body the usual rootlayout then the other layout remove it try then check if problem persist if not start to add stuff back until it broke
76 Replies
Northeast Congo LionOP
up
i think it is creating multiple video players which is throwing errors
the code that you provided , i don't see anything issue there, so i can not say where is causing this problem.
@RxvxntxN i think it is creating multiple video players which is throwing errors
Northeast Congo LionOP
Yeah it definitely is, but I can’t understand why
I got many vids on a page, 20-25 but with total of 6-8 unique vids. Even if I comment all of them but keep that one in hero section I still get the issue
There’s no way the vid can be “corrupted” ? Haven’t tried diff vid in the same place yet
@Northeast Congo Lion There’s no way the vid can be “corrupted” ? Haven’t tried diff vid in the same place yet
It is not about corruption. Look at error logs carefully ,
there are too many WebMediaPlayers already in existence , I hope you understand it.Might be causing somewhere that you might use wrong structure array or duplication.
@Northeast Congo Lion What can cause this issue? The video that causes it is in hero section which is a part of RSC (page.tsx)
` <video
autoPlay
className="absolute inset-0 z-0 size-full object-cover xl:static xl:w-1/2"
loop
muted
playsInline
poster={poster}
>
<source src={video} type="video/mp4" />
Video is not supported.
</video>`
since that is a log in browser i should asume that is client side component? try to put logs in the component to check rerender also add a useEffect with no dependency to check if component is getting unmount.
share a repo wil help
@Nuitari since that is a log in browser i should asume that is client side component? try to put logs in the component to check rerender also add a useEffect with no dependency to check if component is getting unmount.
Northeast Congo LionOP
it's a server component.
even when i add use client directive with useEffect still no issues with re-rendering
even when i add use client directive with useEffect still no issues with re-rendering
no issues when leaving the page as well
only happens in deploy, i think i should've mentioned that ealier
i think it's something to do with video streaming in chunks
why you dont try to make that server component be part of the shell?
and you are sure you dont have cyclic rendring i mean one component somehow inside itself
@Nuitari why you dont try to make that server component be part of the shell?
Northeast Congo LionOP
wdym?
@Nuitari and you are sure you dont have cyclic rendring i mean one component somehow inside itself
Northeast Congo LionOP
no, i have it in other places, but not that one. And even if i keep the page clean and only render hero component i still get the issue
next only stream when that part is dynamic mean cant be prererendered
Northeast Congo LionOP
ah, well im planning to implement cached components and prerendering soon
oh you dont have prerender?
Northeast Congo LionOP
not using cached components just yet
and you using something dynamic there?
like cookies ?
Northeast Congo LionOP
even then, it will prob hide the prob, and i want to figuare out why am i getting that issue
@Nuitari like cookies ?
Northeast Congo LionOP
correct
at a layout level of that route
why you reading the cookie if i can ask?
i dont think streaming can cause that
that 6300 is a very big number
Northeast Congo LionOP
for now it's just for header, checking if user logged in and for mini cart.
ill also use cookie to get an auth token for fetching the product
if you dont need to know who is the user but only if user is logged i advice to use proxy as gatekeeper
ah that is other thing
product is different for each user?
you think you can make a repo to reproduce it? we are blind here
btw sorry about my english i barely learn it
@Nuitari product is different for each user?
Northeast Congo LionOP
it can be diff
@Nuitari btw sorry about my english i barely learn it
Northeast Congo LionOP
all good
keep focus on your problem your videos are in a slider?
@Nuitari you think you can make a repo to reproduce it? we are blind here
Northeast Congo LionOP
its basically a top level async layout that reads cookies, then another layout doing the same. and then the page.tsx (RSC) that has this hero component in
thats all'
Northeast Congo LionOP
yeah i get that issue with only Hero component rendered on deploy
currently there's more than that but as i mentioned before, commenting out other section still get the same issue
also i have react complier enabled, you think there's a chance it could cause it ? 🤔
ok this is how i debug stuff mostly simplify things create a branch (for copy the main or for make the changes and try deploy it) remove anything in layouts except html body the usual rootlayout then the other layout remove it try then check if problem persist if not start to add stuff back until it broke
Answer
dont think so server components arent affected by react compiler they dont have usual lifecycles
Northeast Congo LionOP
ah true
did you try local build?
Northeast Congo LionOP
it shouldnt
yeah, works fine locally
another vercel issue XDDD
Northeast Congo LionOP
thats the biggest concern
i had one on my own
@Nuitari another vercel issue XDDD
Northeast Congo LionOP
its not on vercel xD
its on the infra they use
ah cloudflare?
Northeast Congo LionOP
aws
ecs for now, soon eks
you can try vercel just to confirm?
Northeast Congo LionOP
cant
ok so still do that of start to remove stuff
and then rebuild back
Northeast Congo LionOP
ill try, thanks
hope you tell me how it get solved
@Nuitari hope you tell me how it get solved
Northeast Congo LionOP
deploying it tmrw, will let you know
ok thx always is good to know what cause such weir behaviour
Cape lion
@Northeast Congo Lion I was wondering if you’ve solved this issue? I have the same problem.
@Cape lion <@263759493806948352> I was wondering if you’ve solved this issue? I have the same problem.
Northeast Congo LionOP
hey, solved by making component for a video with "use client"
Northeast Congo LionOP
yeah 🙂
weird you cant use RSC for video
Northeast Congo LionOP
maybe i should create an issue for that
since someone else got that issue too
well you should make first a repo