From 3103da56f7e6aa19bccb296371ab5985c4b07e95 Mon Sep 17 00:00:00 2001 From: Kasper Moskwiak Date: Sat, 1 Aug 2015 15:16:26 +0200 Subject: [PATCH] default src --- example.html | 13 ++++-- lib/videojs-resolution-switcher.js | 64 ++++++++++++++++++++---------- 2 files changed, 53 insertions(+), 24 deletions(-) diff --git a/example.html b/example.html index 62cc32e..d19c469 100644 --- a/example.html +++ b/example.html @@ -52,7 +52,12 @@ videojs('video', { controls: true, muted: true, - width: 1000 + width: 1000, + plugins: { + videoJsResolutionSwitcher: { + default: 'low' // Default resolution [{Number}, 'low', 'high'] + } + } }, function(){ var player = this; window.player = player @@ -61,12 +66,14 @@ { src: 'http://media.xiph.org/mango/tears_of_steel_1080p.webm', type: 'video/webm', - label: 'SD' + label: 'SD', + res: 360 }, { src: 'http://mirrorblender.top-ix.org/movies/sintel-1024-surround.mp4', type: 'video/mp4', - label: 'HD' + label: 'HD', + res: 720 } ]) diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js index 2a29486..b92d549 100644 --- a/lib/videojs-resolution-switcher.js +++ b/lib/videojs-resolution-switcher.js @@ -4,10 +4,9 @@ (function(window, videojs) { 'use strict'; - var defaults = { - option: true - }, - videoJsResolutionSwitcher; + var defaults = {}, + videoJsResolutionSwitcher, + groupedSrc; /** * Initialize the plugin. @@ -33,18 +32,13 @@ onClick: function(){ // Hide bigPlayButton player.bigPlayButton.hide() - // Remember player state var currentTime = player.currentTime() var isPaused = player.paused() - // Change player source and wait for loadedmetadata event, then play video player.src({src: this.src, type: this.type}).one( 'loadedmetadata', function() { player.currentTime(currentTime) - - if(!isPaused){ - player.play() - } + if(!isPaused){ player.play() } player.trigger('resolutionchange') }) } @@ -58,17 +52,12 @@ var ResolutionMenuButton = videojs.extends(MenuButton, { constructor: function(player, options){ this.sources = options.sources; - MenuButton.call(this, player, options); - this.controlText('Quality') - }, createItems: function(){ - - var sources = this.sources.sort(compareResolutions); + var sources = this.sources; var menuItems = []; - for(var i = 0; i < sources.length; i++){ menuItems.push(new ResolutionMenuItem(player, { label: sources[i].label, @@ -76,27 +65,26 @@ type: sources[i].type })) } - return menuItems; } }) player.updateSrc = function(src){ - //Return current src if src is not given if(!src){ return player.src() } - // Dispose old resolution menu button before adding new sources if(player.controlBar.resolutionSwitcher){ player.controlBar.resolutionSwitcher.dispose() delete player.controlBar.resolutionSwitcher } + //Sort sourcec + src = src.sort(compareResolutions) + groupedSrc = bucketSources(src) var menuButton = new ResolutionMenuButton(player, { sources: src }); menuButton.el().classList.add('vjs-resolution-button') player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton) - - player.src(src); + player.src(chooseSrc(src)); } /** @@ -110,6 +98,40 @@ return (+b.res)-(+a.res); } + /** + * Group sources by label, resolution and type + * @param {Array} src Array of sources + * @returns {Object} grouped sources: { label: {}, res: {}, type: {} } + */ + function bucketSources(src){ + var resolutions = { + label: {}, + res: {}, + type: {} + } + for(var i = 0; i tag inside