VIDEOJS: ERROR: TypeError: Cannot read property 'vdata1524495014183' of null

[hawkeye64]

Description

When trying to go into Fullscreen mode, the video player briefly goes into Fullscreen, then returns from Fullscreen almost immediately.

This is a Vue project. I am using ResizeObservable to resize several components on the page. When going into Fullscreen, the VideoJS div (I have two) is also resized, but it should be ignoring this when in fullscreen mode. If I turn off the ResizeObservable, this issue does not happen.

Include a reduced test case, we have a starter template on JSBin you can use. Sorry, I just could not get this accomplished. :(

Steps to reproduce

1.Start video playing 2.Click on Fullscreen icon/button 3.Video goes into fullscreen 4.Then immediately goes back to normal size and video has stopped playing

Results

Expected

The video player go into fullscreen mode and continue playing video.

Actual

The video player goes into Fullscreen briefly and then almost immediately goes back to normal size and the video has stopped.

Error output

Chrome debug console shows error:

video.cjs.js?0e26:450 VIDEOJS: ERROR: TypeError: Cannot read property 'vdata1524495014183' of null
    at hasData (video.cjs.js?0e26:1597)
    at trigger (video.cjs.js?0e26:2023)
    at Player.trigger$$1 (video.cjs.js?0e26:2898)
    at Player.documentFullscreenChange (video.cjs.js?0e26:20775)
    at HTMLDocument.bound (video.cjs.js?0e26:2282)
    at HTMLDocument.data.dispatcher (video.cjs.js?0e26:1908)

Additional Information

versions

videojs

6.7.3

browsers

Google Chrome 65.0.3325.181

OSes

Ubuntu 17.10

plugins

None

[hawkeye64]

FYI, I am calling dispose() in the beforeDestroy function.

[thijstriemstra]

I've also seen this while writing tests for a video.js plugin but not sure how to reproduce them. Can you write a unit test that reproduces this @hawkeye64? ;)

[gkatsev]

Sorry that this error is so bad still. But it generally means that there's still some event handler listening for events and it gets triggered after the player or component it's attached has been disposed.

[hawkeye64]

This was happening on first use. I think several of the functions could have better error handling (checking for valid values). I think some of the issues may be that in more modern libraries like Angular, React and Vue, you can "if" conditions that will then inject or remove the html portions based on conditions, which in that case, you can't call dispose(). My work-around in Vue, which seemed to have fixed this for me, was instead of using v-if I used v-show which keeps the HTML intact, but toggles the visibility based on the condition.

[gkatsev]

I think we didn't get rid of this error because it usually pointed at a bigger problem but I don't really know why we didn't make the error a lot clearer with a better explanation.

[gkatsev]

The best we have currently is a question in our troubleshooting docs: http://docs.videojs.com/tutorial-troubleshooting.html#vdata123456-errors

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.