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:

One thought on “VideoJS Error: VideoJS showing HTML5 video player with AngularJS”

  1. It’s really a nice and useful piece of information. I’m glad that you just shared this helpful info with us. Please stay us up to date like this. Thanks for sharing.

Leave a Reply

Your email address will not be published.