TypeError: Class constructor Plugin cannot be invoked without 'new'

alexkrycek commented 1 year ago

I'm using video.js 8.2.0, jQuery 3.6.4 and the most recent version of videojs-sprite-thumbnails. I'm receiving the following error message on Chrome, Brave and Edge:

videojs-sprite-thumbnails.js:291 Uncaught TypeError: Class constructor Plugin cannot be invoked without 'new' at new SpriteThumbnails (videojs-sprite-thumbnails.js:291:22) at Player.spriteThumbnails (video.js:27222:24) at Player.onPlayerReady (playersetup.js:32:8) at Player. (video.js:4318:16) at Array.forEach () at Player. (video.js:4317:22) at video.js:4951:9

This is my index.html:

<body>
    <script>
        const videoData = {
        "thumbsheet" : "thumbs/earth.png",
        "videoCover" : "images/earth.png",
        "videoSource-240p" : "",
        "videoSource-320p" : "",
        "videoSource-480p" : "",
        "videoSource-720p" : "",
        "videoSource-1080p" : "videos/earth-1080p.mp4",
        "videoSource-4k" : "",
      };
    </script>

    <div id="video_container">
      <video-js id="main_video_player" class="video-js"></video-js>
    </div>

    <script src="videojs/8.2.0/video.min.js"></script>
    <script src="jquery/jquery-3.6.4.min.js"></script>
    <script src="videojs/plugins/theater-mode-1.1.0/videojs.theaterMode.js"></script>
    <script src="videojs/plugins/sprite-thumbnails-0.6.0/videojs-sprite-thumbnails.js"></script>
    <script src="playersetup.js"></script>
  </body>

My playersetup.js:

videojs(
    'main_video_player', 
    {
        controls: true,
        autoplay: false,
        preload: 'metadata',
        playbackRates: [0.5, 1, 1.5, 2, 3],
    },
    function onPlayerReady() {
        this.src([{
            src: videoData["videoSource-1080p"],
            type: 'video/mp4'
        }]);

        // PLUGIN: videojs-sprite-thumbnails
        // Setup 256 x 144 thumbnails with an interval of five seconds
         this.spriteThumbnails({
             url: videoData["thumbsheet"],
             width: 256,
             height: 144,
             interval: 5
         });
    }
);

I can't figure out what I've done wrong. I'd appreciate any help. Thanks!