VideoJS: Uncaught TypeError: player.spriteThumbnails is not a function

user_16837137 0
Viewed 154

I'm trying to integrate a plugin to my VideoJS setup to display a thumbnail preview if you hover over the scroll bar, therefor I'm using the following: https://github.com/phloxic/videojs-sprite-thumbnails

Currently, my player simply does not load at all, if I take a look at the Developer console of my browser I see:

Uncaught TypeError: player.spriteThumbnails is not a function

Why that?

This is how my VideoJS Setup currently look like:

                <video-js autoplay id=player class="vjs-fluid" controls="true">
                    <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 }}";
                        };
                        var player = videojs('player', function () {
                        }, {
                            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,
                                }},
                            plugins: {
                                // default thumbnail settings for this player
                                spriteThumbnails: {
                                    width: 192,
                                    height: 108
                                }
                            },
                            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.spriteThumbnails({
                            url: '{{ sprites_url }}',
                            width: 192,
                            height: 108,
                            interval: 30,
                        }).log.level('debug');
                        player.src({
                            src: '{{ playlist_url }}',
                            type: 'application/vnd.apple.mpegurl m3u8',
                            Authorization: true
                        });
                        player.play();
                    </script>
                </video-js>

Does somebody have a hint for me here? I also have to mention that I have literally no knowledge on JS, so I'm not really sure where to look at.

VideoJs Version is 7.19.2

Many thanks in advance

video.js plugins javascript
1 Answers

Implemented the player now like this, works like a charm:

                <script>
                    videojs.Vhs.xhr.beforeRequest = function (options) {
                        options.headers = options.headers || {};
                        options.headers.Authorization = "{{ access_token }}";
                    };
                    const player = window.player = videojs('player', {
                        fill: true,
                        autoplay: true,
                        responsive: true,
                        fluid: true,
                        preferFullWindow: true,
                        preload: "auto",
                        enableLowInitialPlaylist: true,
                        html5: {
                            nativeControlsForTouch: false,
                            nativeAudioTracks: false,
                            nativeVideoTracks: false,
                            vhs: {
                                experimentalBufferBasedABR: true,
                                useDevicePixelRatio: true,
                                enableLowInitialPlaylist: false,
                                limitRenditionByPlayerDimensions: true,
                                overrideNative: false,
                                handleManifestRedirects: true,
                                useNetworkInformationApi: true,
                            }}
                        })
                    player.src({
                        src: {{ playlist_url | json_string }},
                        type: 'application/vnd.apple.mpegurl m3u8',
                        Authorization: true
                    });
                    player.spriteThumbnails({
                        url: {{ sprites_url | json_string }},
                        width: 192,
                        height: 108,
                        interval: 30,
                    });
                    player.play();
                </script>

In Django, it's important to form strings correctly to place it later in JS code, so a decorator is also needed to convert a non-JSON string to a JSON string. Especially if the link contains special characters like &. Otherwise, these might get called as "&amp" and not "&":

from django.utils.safestring import mark_safe
from django.template import Library
import json

register = Library()


@register.filter(is_safe=True)
def json_string(obj):
    return mark_safe(json.dumps(obj))
user_168371370
Related