videos-tvthek.js

(function(videojs) {
    var oontvthek = function(options) {
        var player = this;

        function initMenu() {
         var MenuItem = videojs.getComponent('MenuItem');
         var ResolutionMenuItem = videojs.extend(MenuItem, {
            constructor: function(player, options){
               options.selectable = true;
               // Sets this.player_, this.options_ and initializes the component
               MenuItem.call(this, player, options);
               this.src = options.src;
               player.on('resolutionchange', videojs.bind(this, this.update));
            }
         } );
         ResolutionMenuItem.prototype.handleClick = function(event){
            MenuItem.prototype.handleClick.call(this,event);
            player.oontvthek.currentResolution(this.options_.label);
         };
         ResolutionMenuItem.prototype.update = function(){
            var selection = player.oontvthek.currentResolution();
            this.selected(this.options_.label === selection.label);
         };
         MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem);
         var MenuButton = videojs.getComponent('MenuButton');
            oontvthek.ResolutionMenuButton = videojs.extend(MenuButton, {
               constructor: function(player, options){
                  this.label = document.createElement('span');
                  options.label = 'Quality';
                  // Sets this.player_, this.options_ and initializes the component
                  MenuButton.call(this, player, options);
                  this.el().setAttribute('aria-label','Quality');
                  this.controlText('Quality');


                  var staticLabel = document.createElement('span');
                  videojs.addClass(staticLabel, 'vjs-menu-icon');
                  this.el().appendChild(staticLabel);
                  player.on('updateSources', videojs.bind( this, this.update ) );
               }
            } );
            oontvthek.ResolutionMenuButton.prototype.createItems = function(){
               var menuItems = [];
               var labels = (this.sources && this.sources.label) || {};

               // FIXME order is not guaranteed here.
               for (var key in labels) {
                  if (labels.hasOwnProperty(key)) {
                     console.log('key?', key)
                     menuItems.push(new ResolutionMenuItem(
                        this.player_,
                        {
                           label: key,
                           src: labels[key],
                           selected: key === (this.currentSelection ? this.currentSelection.label : false)
                        })
                     );
                  }
               }
               return menuItems;
            };
            oontvthek.ResolutionMenuButton.prototype.update = function(){
               this.sources = player.oontvthek.getGroupedSrc();
               this.currentSelection = player.oontvthek.currentResolution();
               this.label.innerHTML = this.currentSelection ? this.currentSelection.label : '';
               return MenuButton.prototype.update.call(this);
            };
            oontvthek.ResolutionMenuButton.prototype.buildCSSClass = function(){
               return MenuButton.prototype.buildCSSClass.call( this ) + ' vjs-resolution-button';
            };
            MenuButton.registerComponent('ResolutionMenuButton', oontvthek.ResolutionMenuButton);
        }

        player.oontvthek.getVideoSource = function(segmentId, callback) {
            var options = {
                uri: '//tvthek.orf.at/index.php/api/service/public/GetSegmentByEncryptedId?segment=' + segmentId,
                timeout: 45 * 1000
            },
            callbackFn = function(error, response, responseBody) {
                var jsonResponse;
                try {
                    jsonResponse = JSON.parse(responseBody);
                } catch (e) {
                    return false;
                }
                player.poster(jsonResponse.image_url);
                callback(jsonResponse.playlist_data.sources.filter(function(source) {
                    return source.delivery === 'progressive';
                }));
            };

            // Call tvthek API to get the url of the video source
            videojs.xhr(options, callbackFn);
        };

        player.oontvthek.setSource = function(segment, callback) {
            player.oontvthek.getVideoSource(segment, function(sources) {
                player.oontvthek.sources = sources;
                player.src(sources);
                callback();
            });
        };

        player.oontvthek.getGroupedSrc = function() {
           return {
              'label': {
                 'niedrig': player.oontvthek.sources.filter(function(s) {
                    return s.quality_string == 'niedrig';
                 }),
                 'mittel': player.oontvthek.sources.filter(function(s) {
                    return s.quality_string == 'mittel';
                 }),
                 'hoch': player.oontvthek.sources.filter(function(s) {
                    return s.quality_string == 'hoch';
                 }),
                 'HD': player.oontvthek.sources.filter(function(s) {
                    return s.quality_string == 'sehr hoch (HD)';
                 })
              }
           }
        }
        player.setSourcesSanitized = function(sources, label) {
            player.oontvthek.currentResolutionState = {
               label: label,
               sources: sources
            };
            player.src(sources.map(function(src) {
               return {
                  src: src.src,
                  type: src.type
               };
            }));
            return player;
        }
        player.oontvthek.currentResolution = function(val) {
           if (val) {
              // Remember player state
              var currentTime = player.currentTime();
              var isPaused = player.paused();
              // Hide bigPlayButton
               if(!isPaused && player.options_.bigPlayButton){
                  player.bigPlayButton.hide();
               }
               var handleSeekEvent = 'loadeddata';
               if(player.techName_ !== 'Youtube' && player.preload() === 'none' && player.techName_ !== 'Flash') {
                  handleSeekEvent = 'timeupdate';
               }
              var sources = player.oontvthek.getGroupedSrc().label[val];
              player
                  .setSourcesSanitized(sources, val)
                  .one(handleSeekEvent, function() {
                     player.currentTime(currentTime);
                     player.handleTechSeeked_();
                     if(!isPaused){
                     // Start playing and hide loadingSpinner (flash issue ?)
                     player.play().handleTechSeeked_();
                  }
                  player.trigger('resolutionchange');
               });
           }
           return player.oontvthek.currentResolutionState;
        }


        // main
        player.ready(function() {
         initMenu();
         player.oontvthek.setSource(options.segment, function() {
            //player.play();
            player.oontvthek.currentResolutionState = {
               label: 'niedrig',
               sources: player.oontvthek.getGroupedSrc()['niedrig']
            }
            var menuButton = new oontvthek.ResolutionMenuButton(player, {});
               player.controlBar.resolutionSwitcher = player.controlBar.el_.insertBefore(menuButton.el_, player.controlBar.getChild('fullscreenToggle').el_);
               player.controlBar.resolutionSwitcher.dispose = function(){
                  this.parentNode.removeChild(this);
             };
         });

        })
    };

    videojs.plugin('oontvthek', oontvthek);

}(window.videojs));

mix of two plugins:

• https://github.com/kmoskwiak/videojs-resolution-switcher
• https://github.com/newscorpaus/videojs-ooyala