VideoJS - unable to destroy and initialize

Question

On VideoJS website you state that support was moved to StackOverflow, so let's try it here. I've got the following code:

var player = _V_('the_id', {}, function(){
    jQuery('.remove').on('click.destroyvideojs', function(){
        player.destroy();
        jQuery(this).unbind('click.destroyvideojs');
    });
});

It initializes video at first and it destroys it.

But when I want to initialize it again using the same exact piece of code, it doesn't work. It doesn't initialize the script on the same element ID (when it was removed from DOM and added again with correct initialization call after it's been added). I'm wondering why this might be happening?

Another try today:

var the_id = 'my_id';
var player = _V_(the_id, {}, function(){        
    player.destroy();
    _V_(the_id, {}, function(){
        alert('reinit');
    });
});

So, re-initialization of VideoJS simply doesn't work. Furthermore, it removed controls from the video now.

score 28 · Answer 1 · answered Jun 09 '13 at 23:27

28

In case this helps anyone, it looks like it's dispose in Version 4:

var player = videojs('my-video');
player.dispose();

answered Jun 09 '13 at 23:27

manafire

5,984
4
43
53

Thanks! It took me a while to find the solution to this problem. – Soska Jul 09 '13 at 20:26
7

dispose() method seems to remove video element from markup! How can one remove video-js player without removing the video element from markup (so it can still be played via browser's default HTML5 player). – smohadjer Feb 20 '14 at 12:15
this worked for me as I'm on an older version of the player for better IE8 support. the older version uses destroy(), the newest version uses dispose(), but not sure what the internal differences are. – danjah Jul 04 '14 at 02:07

score 8 · Answer 2 · answered Sep 30 '15 at 20:18

8

Having looked at the source for Video.js 5.0.0. @l:17236 You can just do the following:

if(videojs.getPlayers()[id]) {
    delete videojs.getPlayers()[id];
}

answered Sep 30 '15 at 20:18

Mwayi

1,623
15
13

My absolute hero! – Rickard Liljeberg Apr 21 '17 at 14:57

Gabo Esquivel · Answer 3 · 2013-02-27T22:44:14.923

It seems that player hasn't been defined when the callback executes. Take a look at this js fiddle http://jsfiddle.net/gaboesquivel/BA8Pm/

destroy(); works for me. this how the function looks like

destroy: function () {
            this.stopTrackingProgress();
            this.stopTrackingCurrentTime();
            _V_.players[this.id] = null;
            delete _V_.players[this.id];
            this.tech.destroy();
            this.el.parentNode.removeChild(this.el)
        }

check this solution too http://help.videojs.com/discussions/problems/861-how-to-destroy-a-video-js-object#comment_13544514

score 0 · Answer 4 · answered May 07 '13 at 12:05

I pulled some of My hare from My head, very hard to find response fore such questions... So here is My solution, with JQuery... the solution was born from the question how to destroy uninitialised player objects, you guys save my day in the end, cos We can destroy only players that are shown, and even if I clean the HTML and reinitialise dynamically playerJs the flash fall back will not work for unshowed undestroyed media-player. so here is the solution:

$.each(_V_.players, function (key, player) { 
    if (player.isReady) { player.destroy(); } 
    else { delete _V_.players[player.id]; } 
});

a little messy but will do just fine. cheers!

score 0 · Answer 5 · edited Dec 11 '20 at 19:28

The api reference your looking for is .dispose(); however it does not remove settings from the dom. If you have third party plugins other items may litter your DOM after the dispose is run. To run dispose and clean up your dom use a code like this

dispose = function() {
    if (settings.debug) {
        console.info('place.videojs_element.dispose()');
    } /*Target the Player Element*/
    var player = videojs(settings.element.id + '_player'); /*Pause Video*/
    player.pause(); /*Wait for third party scripts to stop listening!!! <-- Important*/
    setTimeout(function() { /*Dispose of the player*/
        player.dispose();
        /*I have a new video element waiting to be placed ( this code is proprietary )*/
        var epi = new EPI();
        epi.place.videojs_element(settings, data); /*Wait time 600ms*/
    }, 600); /*Destroy the old video element <--- Important */
    $('#' + settings.element.id).empty();
}

See a working example in action: http://codepen.io/JaminQuimby/pen/yNaOwz/

The above will give you a clean DOM and completely remove the video player.

VideoJS - unable to destroy and initialize

5 Answers5