phloxic / videojs-sprite-thumbnails

Video.js plugin to display thumbnails from a sprite image when hovering over the progress bar
https://lastshiphome.de/en/movie
MIT License
52 stars 13 forks source link

TypeError: player.spriteThumbnails is not a function #23

Closed ghost closed 2 years ago

ghost commented 2 years ago

Hello,

I really would like to use your plugin but for some reason I don't get the plugin initialized it seems, can you help? Currently, I get the following error: TypeError: player.spriteThumbnails is not a function This is how my HTML page looks:

...
                        <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
                        <script src="{% static 'videojs/video.js' %}"></script>
                        <script src="{% static 'videojs/videojs-sprite-thumbnails.js' %}"></script>
                        <script src="{% static 'videojs/videojs-http-streaming.js' %}"></script>
                        <script>
                            videojs.Vhs.xhr.beforeRequest = function (options) {
                                options.headers = options.headers || {};
                                options.headers.Authorization = "{{ access_token }}";
                            };
                            const player = videojs('player', function () {
                            }, {
                                plugins: {
                                    // default thumbnail settings for this player
                                    spriteThumbnails: {
                                        width: 160,
                                        height: 90
                                    }
                                },
                                fill: true,
                                autoplay: true,
                                responsive: true,
                                fluid: true,
                                preferFullWindow: true,
                                preload: "auto",
                                enableLowInitialPlaylist: true,
                                html5: {
                                    nativeControlsForTouch: false,
                                    nativeAudioTracks: false,
                                    nativeVideoTracks: false,
                                    vhs: {
                                        enableLowInitialPlaylist: true,
                                        limitRenditionByPlayerDimensions: true,
                                        smoothQualityChange: true,
                                        overrideNative: false,
                                        handleManifestRedirects: true,
                                        useNetworkInformationApi: true,
                                    }
                                }, function() {
                                    this.on('error', function (event) {
                                        const time = this.currentTime();
                                        if (this.error().code === 3) {
                                            this.error(null).pause().load().currentTime(time).play();
                                        }
                                        if (this.error().code === 2) {
                                            this.error(null).pause().load().currentTime(time).play();
                                        }
                                        if (this.error().code === 1) {
                                            this.error(null).pause().load().currentTime(time).play();
                                        }
                                    });
                                }
                            });
                            player.src({
                                src: '{{ playlist_url }}',
                                type: 'application/vnd.apple.mpegurl m3u8',
                                Authorization: true
                            });
                            player.spriteThumbnails({
                                url: '{{ sprites_url }}',
                                width: 192,
                                height: 108,
                                interval: 30,
                            }).log.level('debug');
                            player.play();
                        </script>
...

Thanks in advance