The correct way to dispose of an HLS VideoJS player

[himslm01]

I have a single-page application which loads either m4v files or m3u8 playlists.

I initialise the player of an m4v file, using 'videojs(videoPlayer, {}, function (){});' I get the expected callback into that anonymous function. And when I want to remove the player, using 'videojs(videoPlayer).dispose();' everything works as documented.

I initialise the player of an m3u8 file in the same way, but when I dispose of the player exceptions are thrown.

dispose of videoPlayer
video.js:23
VIDEOJS: Video.js: buffered unavailable on Hls playback technology element. TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"}
video.js:137
Uncaught TypeError: undefined is not a function
video.js:137
t.g.buffered
video.js:67
M
video.js:68
s.buffered
video.js:69
s.bufferedPercent
video.js:111
(anonymous function)
video.js:14
e

I assume I'm doing something wrong - do I need to dispose of an HLS playing player differently?

[dmlap]

No, that sounds like you're doing things correctly. Do you have an example we could check out that demonstrates the issue?

[himslm01]

Sure.

https://github.com/himslm01/videojs_test1

I'm serving the folder src/main/webapp through a web server, and looking at the page in Chrome 41.0.2272.76 (64-bit) on a Mac.

View the index.html page.
Open the JavaScript Console.
Press the 'Create video' button.
Do not play the video.
Press the 'Dispose video' button.

Basically, you get "TypeError: undefined is not a function {stack: (...), message: "undefined is not a function"}" errors if you have not played to the end of the video before you dispose, and not playing the video at all is the same as not playing it to the end.

[dmlap]

I spent some time playing with this yesterday. The errors I saw all originated from the Flash tech so it sounds like their may be some cleanup it's expecting that HLS is missing. Haven't gotten to the bottom of it yet but I'm still looking.

[himslm01]

Thanks for the update, David.
One thing I also notice is, for longer clips - if I dispose of the video player while it is playing but before all of the HLS segments have been downloaded then I see logs being printed saying that the rest of the HLS segments are being downloaded - and lots and lots of "TypeError: undefined is not a function..." exceptions.
I've also seen the last segment be downloaded again and again in a loop.
I don't believe (from looking at web server logs) that the segments are actually being downloaded, just that the dispose hasn't stopped the download process from happening.

[vasklund]

Although I haven't looked at this in detail, it sounds like it could be related to this bug I filed a while ago:
videojs/video.js#1896

Essentially the Flash tech doesn't clean itself up correctly when it is disposed, leaving old event handlers alive with references to objects and functions that are removed correctly (thus the null/undefined references).

If you want to, you could try my attempt at fixing the above bug at https://github.com/vasklund/video.js/tree/flash-dispose-fix. I suspect there are a lot of bugs that are caused by videojs/video.js#1896, but having some real world cases would be much better than just my speculations.

For reference, I filed the bug above after having problems doing similar things to what you are doing @himslm01.

[dmlap]

This was fixed via videojs/video.js#2125 and is live in video.js 4.12.6. Please re-open this if you're still running into issues after updating.