Video.js: Log a warning if the element given to Video.js isn't in the DOM

[gkatsev]

Description

Video.js can accept a video element (or soon a video-js element #4640) as the first argument and it will build the player around the video element or inside that div. However, if the element given to Video.js isn't actually in the DOM nothing will happen and the developer could end up confused as to what is happening.
We should log a warning if the element that is passed to the Video.js method isn't currently included in the DOM.

More information on reproducing is below but to fix it, it will basically involve doing a call to document.body.contains(), which has full browser support, with the element that we received in videojs around here. Then we can log a warning with videojs.log.warn().

If you'd like to work on this, please let us know and please don't work on this if someone else has already claimed it!

Steps to reproduce

1. Create a video element in JavaScript
2. Pass that video element to Video.js
3. Notice that the page is still blank

// This is the *broken* scenario
var vid = document.createElement('video');
var player = videojs(vid, {});
// We should see a warning logged here

// This scenario should work and not lead to a warning log
var vid = document.createElement('video');
document.body.appendChild(vid);
var player = videojs(vid, {});

Results

Expected

If we are passed an element that is not in the DOM, we should log a warning

Actual

Nothing currently happens, which could be confusing.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

Any

browsers

Any

OSes

Any

plugins

None or any

[odisei369]

Very nice description. I'll do this.

[gkatsev]

Merged the initial PR for the feature but it would be good to add a test to it. Info regarding the test can be found here: https://github.com/videojs/video.js/pull/4698#issuecomment-340815154

[WaliHassanKhan]

Allow me to contribute in it

[gkatsev]

Oops, sorry, we forgot to close this when the change was merge in. Unfortunately, it's already been done @WaliHassanKhan. thanks for your interest, I hope to have more of these in the future.

[WaliHassanKhan]

That's ok

[WilliamTsao]

When working with shadowDOM, this warning is thrown because document.body.contains cannot find element within shadowRoot.

[gkatsev]

Can you open a new issue about that? A reduced test case would be super helpful.

[brendon]

@WilliamTsao, did you end up posting an issue? I get this with VueJS when providing an element obtained through this.$refs in the mounted callback.

[brendon]

Turns out that $refs aren't accessible in mounted on the first render. You need to wrap your videojs call in:

this.$nextTick(function () {  })