Video.js: Cannot read property 'vdata' after calling dispose

[pedromcunha]

Description

I know this issue has been posted before but I don't think any of the issues posted have been the same as my scenario (maybe I'm wrong, not sure). I've been struggling with an error, namely this one:

bugsnag-3.min.js:1 VIDEOJS: ERROR: TypeError: Cannot read property 'vdata1478551913479' of null

I'm working on Angular application that removes the video element from the dom. During the directive's clean up phase I make a call to the dispose method of the videojs element. Upon some further investigation it seems like the dispose method actually removes the element from the dom. So when we get into this helper method here:

function hasElData(el) {
  var id = el[elIdAttr];

  if (!id) {
    return false;
  }

  return !!Object.getOwnPropertyNames(elData[id]).length;
}

It throws the error mentioned above. Now, I know one quick way of fixing this. I squelched the error by adding this code to the top of the function:

 if(!el)
     return false;

This works but I don't necessarily want to fork videojs. Is this a fixable issue or am I just doing something completely kooky? Also, I should mention I'm using the videojs hls contrib plugin.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. initialize a videojs player
2. call dispose on said player
3. Error

Error output

bugsnag-3.min.js:1 VIDEOJS: ERROR: TypeError: Cannot read property 'vdata1478551913479' of null

Additional Information

versions

5.11.x
5.12.x

videojs

video.js

browsers

Chrome, firefox

OSes

Mac OSX

plugins

video-contrib-hls.js

[gkatsev]

That error generally means that something -- a plugin, component, or event handler -- is still trying to use the player in some way after being disposed.
Do you have a reduced test case we can take a look at? Would make it a lot easier to get the root of the problem.

[pedromcunha]

Here's an isolated test case, it's using videojs (5.12.0), videojs hls plugin (3.6.7) and angularjs(1.5.x). As you can see the issue is reproducible and it's basically identical to my application code.

Note that you have to hit run with JS, not sure why it isn't auto running the JS bin example.

https://jsbin.com/yoziqikaha/4/edit?html,js,output

[gkatsev]

Looks like an issue with contrib-hls not disposing properly. It seems like we get a sourceclose event that we try to do stuff with but it happens after videojs has already disposed to the player for the most part.
this gets triggered as part of disposing the html media element but by the time we got here the player's element no longer exists.

[pedromcunha]

Interesting, is this something I'll need to reopen in the contrib-hls project repo?

AFAIK I'm doing the right thing. Unless I've missed something.

[gkatsev]

Yeah, I think you're using it correctly. Leaving it here is fine for now.

[pedromcunha]

What's the status on this issue?

[gkatsev]

Unfortunately, we've been super busy with other things and weren't able to get to it. A PR would be welcome, if you can figure it out, otherwise, it may take some time.

[crowdoptic]

+1 - happens for us also with Angular1.5.0 and videojs 5.19.0

[mparisi76]

+1 -happens outside of Angular also and has become a bit of a nuisance.. Is there anything that can be done to prevent this error? Any workarounds?

Thanks.

[stewones]

+1 angular 4 =/

[jamesjtong]

+1, wrapping player.dispose() with a setTimeout to get around this issue.

setTimeout(() => { player.dispose(); });

[misteroneill]

@crowdoptic @mparisi76 @st1s @jamesjtong Are you all using videojs-contrib-hls as well? The original report seems related specifically to that project.

[jamesjtong]

@misteroneill, yep videojs-contrib-hls 5.4.1

[NTXAggie]

I was experiencing this exact same issue as well on Ionic 3 and videojs-contrib-hls@latest .... I found that I was actually calling dispose twice, even though I had wrapped the dispose with a if(this.player), I guess the player still 'exists' even after you dispose it.