OvenPlayer errors when element has no idSee 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 ❤️
- Created a year ago
- Comments:5 (5 by maintainers)
Top GitHub Comments
@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.
OvenPlayer now works great with an id-less Vue component 🙌🏻 Thank you!