From 92477a26db40a1d51b7f2343f95c97a92f282823 Mon Sep 17 00:00:00 2001 From: Kasper Moskwiak Date: Sun, 13 Mar 2016 20:57:55 +0100 Subject: [PATCH] youtube tech --- examples/flash.html | 81 +++++++++++++++++++++++++++++ example.html => examples/html5.html | 56 ++------------------ examples/youtube.html | 71 +++++++++++++++++++++++++ lib/videojs-resolution-switcher.js | 78 ++++++++++++++++++++++++--- package.json | 3 +- 5 files changed, 229 insertions(+), 60 deletions(-) create mode 100644 examples/flash.html rename example.html => examples/html5.html (62%) create mode 100644 examples/youtube.html diff --git a/examples/flash.html b/examples/flash.html new file mode 100644 index 0000000..60dfb11 --- /dev/null +++ b/examples/flash.html @@ -0,0 +1,81 @@ + + + + + Video.js Resolution Switcher + + + + + + +
+

+ Use flash +

+
+ + + + + + + + + diff --git a/example.html b/examples/html5.html similarity index 62% rename from example.html rename to examples/html5.html index cdf913e..a987cc4 100644 --- a/example.html +++ b/examples/html5.html @@ -4,8 +4,8 @@ Video.js Resolution Switcher - - + + + + +
+

+ Youtube tech +

+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/lib/videojs-resolution-switcher.js b/lib/videojs-resolution-switcher.js index 7c04c4b..5c678a6 100644 --- a/lib/videojs-resolution-switcher.js +++ b/lib/videojs-resolution-switcher.js @@ -86,7 +86,7 @@ // Probably because of https://github.com/videojs/video-js-swf/issues/124 // If player preload is 'none' and then loadeddata not fired. So, we need timeupdate event for seek handle (timeupdate doesn't work properly with flash) var handleSeekEvent = 'loadeddata'; - if(this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') { + if(this.player_.techName_ != 'Youtube' && this.player_.preload() === 'none' && this.player_.techName_ !== 'Flash') { handleSeekEvent = 'timeupdate'; } setSourcesSanitized(this.player_, this.src, this.options_.label, customSourcePicker).one(handleSeekEvent, function() { @@ -282,14 +282,76 @@ } return {res: selectedRes, label: selectedLabel, sources: groupedSrc.res[selectedRes]}; } + + function initResolutionForYt(player){ + // Init resolution + player.tech_.ytPlayer.setPlaybackQuality('default'); + + // Capture events + player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){ + player.trigger('resolutionchange'); + }); + + // We must wait for play event + player.one('play', function(){ + var qualities = player.tech_.ytPlayer.getAvailableQualityLevels(); + // Map youtube qualities names + var _yts = { + "highres": {res: 1080, label: '1080', yt: 'highres'}, + "hd1080": {res: 1080, label: '1080', yt: 'hd1080'}, + "hd720": {res: 720, label: '720', yt: 'hd720'}, + "large": {res: 480, label: '480', yt: 'large'}, + "medium": {res: 360, label: '360', yt: 'medium'}, + "small": {res: 240, label: '240', yt: 'small'}, + "tiny": {res: 144, label: '144', yt: 'tiny'}, + "auto": {res: 0, label: 'auto', yt: 'default'} + } - // Create resolution switcher for videos form tag inside