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 (
    at e (
    at jn (
    at Object.<anonymous> (
    at r (
    at Object.Ye.t.trigger (

Here’s a minimal repro fiddle:

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:closed
  • Created 2 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

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.

command-tabcommented, Jan 7, 2022

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

Read more comments on GitHub >

github_iconTop 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...
Read more >
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(...);....
Read more >
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....
Read more >
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.
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found