implementing a JW8 YouTube provider

[dmalan]

Hi all,

Per #2233, I gather than JW8 no longer supports YouTube, though it sounds like it should be possible to re-implement at least some of its functionality via a custom provider with YouTube's IFrame Player API. We've taken a look at https://github.com/jwplayer/jwplayer-sdks/tree/master/providers as well as the source for the default provider and HTML5 provider but noticed that the simpler timer provider (which we thought we'd use as a simpler starting point) seems to be based on JW7 still perhaps? (E.g., jwplayer.events no longer seems to be defined in JW8.)

Beyond those files, are there any additional docs or starting points that might facilitate putting together a custom YouTube provider (e.g., that make clear each method's signature, etc.)?

Many thanks!

[robwalch]

Hi @dmalan,

You can get the Youtube provider code used in this repo before we removed it here: https://github.com/jwplayer/jwplayer/blob/v7.12.11/src/js/providers/youtube.js

Here's an updated version of the timer provider that works with JW8 and covers the basics:
https://gist.github.com/robwalch/79a54638a3081e8c8bbf651132c9fa9c

(function(jwplayer) {

    var utils = jwplayer.utils;
    var _ = jwplayer._;
    var TIMEOUT_MS = 25;
    var TIMEOUT_SEC = TIMEOUT_MS/1000;
    var TIMER = 'timer';

    function formatTime(t) {
        t *= 1000; // seconds to milliseconds
        return parseInt(t / 1000 / 60, 10) + ':' + (t / 1000 % 60).toFixed(3);
    }

    function TimerProvider(/* playerId, playerConfig, mediaElement  */) {
        this.name = TIMER;
        this.startTime = new Date();
        this.position = 0;
        this.duration = 0;
        var _container;
        var _timerTimeout;
        var _timerElement = document.createElement('div');
        var _this = this;

        utils.style(_timerElement, {
            color : 'white',
            textAlign: 'center',
            height: '100%',
            fontSize : '18px',
            marginTop: '25%'
        });

        _.extend(this, jwplayer().Events, {
            getName: TimerProvider.getName,
            play: play,
            load: load,
            setContainer: setContainer,
            stop: stop,
            supportsFullscreen: _.constant(true),
            setVisibility: setVisibility,
            pause: pause,
            seek: seek
        });

        function getCurrentTimeStr() {
            return formatTime(_this.position);
        }

        function seek(time) {
            _this.trigger('seek', {
                position: _this.position,
                offset: time
            });
            _this.position = Math.max(0, Math.min(time, this.duration));
            _timerElement.textContent = getCurrentTimeStr();
            _this.trigger('seeked');
        }

        function load(item) {
            this.duration = item.duration || this.duration || 30;
            this.setState('buffering');

            this.seek(item.starttime || 0);

            // Play begins after the buffer is full
            this.trigger('bufferFull');
        }

        function setVisibility(state) {
            state = !!state;
            _container.style.opacity = state ? 1:0;
        }

        function play() {
            this.setState('playing');
            this.setVisibility(true);

            function updateTimer() {
                _this.position += TIMEOUT_SEC;
                if (_this.duration && _this.position >= _this.duration) {
                    _endedHandler();
                    return;
                }
                _timerElement.textContent = getCurrentTimeStr();
                _timerTimeout = setTimeout(updateTimer, TIMEOUT_MS);
                _this.trigger('time', {
                    position: _this.position,
                    duration: _this.duration
                });
            }
            updateTimer();
            return Promise.resolve();
        }

        function _endedHandler() {
            if (_this.state !== 'idle' && _this.state !== 'complete') {
                clearTimeout(_timerTimeout);
                _this.trigger('beforeComplete');
                _playbackComplete();
            }
        }

        function _playbackComplete() {
            clearTimeout(_timerTimeout);
            _this.setState('complete');
            _this.trigger('complete');
        }

        function pause() {
            clearTimeout(_timerTimeout);
            this.setState('paused');
        }

        function stop() {
            clearTimeout(_timerTimeout);
            this.setState('idle');
        }

        function setContainer(element) {
            _container = element;
            _container.appendChild(_timerElement);
        }
    }

    // Register Provider

    // `supports` is called to determine if this provider should be used to play a playlist item source
    TimerProvider.supports = function(item) {
        var type = item.type || utils.extension(item.file);
        return (type === TIMER);
    };

    // static `getName` function is required on provider classes
    TimerProvider.getName = function() {
        return {
            name: TIMER
        };
    };

    // Add the provider class to the api's list of providers to compare media against
    jwplayer.api.registerProvider(TimerProvider);

})(window.jwplayer);

[spello]

Has anyone managed to prepare youtube provider for jwplayer 8?