Destroy Method

[maimairel]

I'm planning to use Plyr in an AJAX environment where pages are dynamically loaded. Currently there's no convenient way to destroy a Plyr instance to prevent memory leaks.

Is it possible to add a .destroy() method where all events are unbind, all markup removed, everything restored to the initial state.

Thanks!

[sampotts]

Yep should be straightforward. I'll take a look.

Cheers 👍

[maimairel]

Thanks for considering this!

[nikolowry]

I was just about to request this. I'd like to point out that it's important to remove the media fully before destroying. I got around this by adding a removeMedia to my app's VideoPlayerView. I'll attach a little standalone jQuery snippet of it.

var removeMedia = function () {
    var $player = $('.player')[0];
    $player.plyr.pause();
    $player.plyr.media.src = '';
    $('.player').find('source').prop('src', '');
   //Now it's safe to unbind/undelegate all other events and destroy;
}

I hadn't done an ajax video implementation in a while so I don't know what might be overkill or not. I always had memory leakage problems if I didn't remove the media before destroying the player element.

[sampotts]

Sorry for the delay, this is now in the latest version. I created destroy() and restore() API methods. destroy() will basically restore the player to the original untouched state and restore() basically creates a new instance. Let me know if that's what you were after? 👍

https://github.com/Selz/plyr/blob/master/src/js/plyr.js#L1532

Remember if you're using AJAX, you can set the source using the source(...) API method:
https://github.com/Selz/plyr#api

[mukeshsan]

I've downloaded the latest version but still not I'm not getting the destroy & restore functions

"Uncaught TypeError: plyr.destroy is not a function"

[sampotts]

It's an API method so needs to be against an instance - check the docs

[casjonker]

We might want to use PLYR, but we're still facing problems with memory leaks. After calling the players[0].destroy() method, the instance still exists... And the entire plyr DOM elements are still to be found in the applications memory as detached elements.

[kemalatila]

Another destroy method

player.destroy();
$('#player_container').html('');
$('#player_container').append('<video id="player"></video>');
const plyr = document.getElementById('player');