VideoJS Error: VideoJS showing HTML5 video player with AngularJS

Recently, I was trying to integrate VideoJS into a personal project. I followed the getting started guide located at http://videojs.com/getting-started/ to no avail.

If this works for you, great! But if you are getting the standard HTML5 video player, try to instantiate VideoJS via JavaScript. In your angular controller, add this:

        var video;
        $scope.$on('$destroy', function () {
            // Destroy the object if it exists
            if ((video !== undefined) && (video !== null)) {
                video.dispose();
            }
        });
  
        // Where my-video-id is the id in the video tag from the getting started guide
        videojs("my-video-id").ready(function () {
            video = this;
            // Replace $scope.video.url with your video url
            // Replace $scope.videos.type with your video type, for example, 'video/mp4'
            video.src({src: $scope.videos.url, type: $scope.videos.type});
        });

I’ve seen this recommended for when the video “is only loaded on hard refresh”. For me, the standard HTML5 video player was always showing, even when hard refreshing the page. Adding the above code caused the VideoJS player to load instead of the standard HTML5 player.

That’s it! You should be using the VideoJS player instead of the standard HTML5 player.

Sources:

• https://log.rowanto.com/angularjs-and-videojs-problem-video-only-loaded-on-hard-refresh-but-not-on-switching-page/