Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

OvenPlayer errors when element has no id

See original GitHub issue

In the process of building a Vue component wrapper for OvenPlayer (related to #245), I discovered that OvenPlayer errors when the targeted element has no id attribute. It does successfully create a <video> tag, but there’s no OvenPlayer UI and it logs the following error once per second:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '#' is not a valid selector.
    at r (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:49790)
    at e (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:49966)
    at jn (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:171409)
    at Object.<anonymous> (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:190562)
    at r (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:49040)
    at Object.Ye.t.trigger (https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:49236)
    at https://cdn.jsdelivr.net/npm/ovenplayer/dist/ovenplayer.js:1:145586

Here’s a minimal repro fiddle: https://jsfiddle.net/command_tab/ep82v5jh/2/

As you can see, I’m making use of create()'s first positional parameter to pass in a DOM node reference instead of a string id (which is great! thank you!), but it seems like something further down the pipeline attempts to target an element by id by prepending # to the element’s id attribute. But since my element has no id attribute, it attempts to query the document for # literally and fails.

I’m deliberately not applying an id attribute because this is a Vue component and I want to be able to support multiple instances of this component on one page. If I were to hardcode a static id attribute, they would collide in that scenario and cause unexpected behavior. While I could generate a unique id for each component instance, I think the proper solution is to find the place in OvenPlayer that’s attempting to query by id and make it use the DOM node reference passed to create() instead of building and querying for an id string.

Thanks so much ❤️

Issue Analytics

State:
Created 2 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

SangwonOhcommented, Jan 6, 2022

@command-tab I figured out the problem with the example you attached. Thank you. I also believe that in order to dynamically create a player as you said, the player shouldn’t have any dependency on the id attribute. We will fix this as a top priority and release it out in the next patch.

0reactions

command-tabcommented, Jan 7, 2022

OvenPlayer now works great with an id-less Vue component 🙌🏻 Thank you!

Top Results From Across the Web

OvenPlayer in React.js component · Issue #245 · AirenSoft ... - GitHub

i need help about using OvenPlayer in React.js component couldn't find any way to do that , is it possible ... OvenPlayer errors...

Initialization - OvenPlayer - OvenMediaEngine

You run the player with the DOM Element and Options with ID. It returns the Instance of the player. const player = OvenPlayer.create(...);....

Uncaught TypeError: Cannot read property 'id' of null

You have no element in your markup that has the id player. So when you tell JS to getElementById, it can't find anything....

ovenlivekit - npm Package Health Analysis - Snyk

Is ovenlivekit safe to use? The npm package ovenlivekit was scanned for known vulnerabilities and missing license, and no issues were found.

OvenPlayer | HTML5 Standard Player - OvenMediaEngine

Most browsers prohibit access to TLS-based HTTPS site through unsecured HTTP or WebSocket.Therefore, we have prepared a demo player based on HTTP or...