So I was working on a private project with angular js and video js, and I am loading videojs dynamically after I got the source of the video, and there’s this very interesting problem where videojs will only be loaded only if you hard-refresh the page (f5-button). If you navigate to the page where it contains the video, or if you were on the page, go somewhere else, then come back again, the video won’t be loaded anymore and you’ll only get your old html5 video from the browser.

Well, after googling around, I found the solution here. Basically, the problem is because we’re holding many reference of the videos. So we need to destroy it when we switch pages. Here’s one way to do that in angular js.

// When destroying object, we should also destroy the player
var myPlayer;
$scope.$on('$destroy', function() {
    // Destroy the object if it exists
    if ((myPlayer !== undefined) && (myPlayer !== null)) {
        myPlayer.dispose();
    }
});

// Manually loading the videojs
videojs("preach-video").ready(function() {
    myPlayer = this; // Store the object on a variable
})