Error when implementing VideoPlayer with Dash

I’m trying to implement a VideoPlayer with Dash by following this example ( DASH DRM Example )

But I’m getting the following error:

The only difference with the example is that I’m using the current versions of lightningjs/sdk(5.2.0) and dashjs(4.5.2)

What was the url of the video it tried to open? Maybe that got redirected? Blocked by login? I’d recommend looking in the network tab to see what is happening

The video opens, the weird thing is that the sound works but the image is not displayed.

With the dashJS example it works as expected with the same url and PlayerOptions as currently used, as I said, the only difference is the version update, but all the code remains the same.

My understanding:

You have a new app based on Dash DRM example (which works with latest versions of dash + SDK)
You have a new video you’re trying to load which requires authentication.
It works correctly with older version, but when you update dashjs it no longer works.

I’d recommend you look at the change log for dashjs and see if something changed which is stopping it from working. According to Google the error your getting is when you try to interact with video before its loaded.

Ok, I’ll check the changelogs. Thanks for the advice. I’ve found something unusual, which is the reason why the sound works, but I’m not able to see the image, I have the VideoPlayer implementation inside a component, and according to the image you can see below the VideoPlayer from the sdk is being created outside the root and with a zIndex equal to 1 so it is below the rest of the component, what could I do to solve this?

@chiefcll We found this example and tried to implement it with no result because we are using Router and our player is implemented inside a component and is called by a page with full-screen dimensions, so if we make a hole in the canvas tag the rest of the components of the application disappear due to the hole.

Hopefully you’ve made some progress on this - but few tips.

  1. The Lightning debugger will show you each of the components inside the canvas and creates a DOM representation of that. When the video tag gets added see if you can set the z-index to 9999 so it is always on top (that might be in the dash options as I think that is what creates the video tag on the page).

It will probably work right away if you just turn off the Lightning debugger as you want have any HTML over the video anymore.

That other example you reference is for certain devices like Comcast X1 boxes - The video player is “under” the HTML web browser. So cutting a hole in the canvas is also cutting a hole in the web browser to make the video visible. Hopefully you don’t need to do that as it should be a simple z-index issue on most devices.