yetangitu/videojs-resolution-switcher
1
0
Fork 0
mirror of https://github.com/kmoskwiak/videojs-resolution-switcher.git synced 2025-10-03 09:49:21 +02:00
Code Issues Releases Wiki Activity

first tests

Browse source
This commit is contained in:
Kasper Moskwiak 2015-12-19 22:55:28 +01:00
parent 40ea2182fb
commit 00b36e245c
2 changed files with 49 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

13
examples/youtube.html
View file

@ -40,17 +40,22 @@
<script src="../lib/videojs-resolution-switcher.js"></script> <script src="../lib/videojs-resolution-switcher.js"></script>
<script> <script>
var sourcePicker = function(){
console.log('asdasd')
}
// fire up the plugin // fire up the plugin
videojs('video', { videojs('video', {
controls: true, controls: true,
muted: true, muted: true,
techOrder: ["youtube"], techOrder: ["youtube"],
width: 500, width: 500,
sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], sources: [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=iD_MyDbP_ZE"}],
plugins: { plugins: {
videoJsResolutionSwitcher: { videoJsResolutionSwitcher: {
default: 'low', // Default resolution [{Number}, 'low', 'high'], default: 'low',
dynamicLabel: true // Display dynamic labels or gear symbol dynamicLabel: true,
customSourcePicker: sourcePicker
} }
} }
}, function(){ }, function(){
@ -58,7 +63,7 @@
window.player = player; window.player = player;
player.on('resolutionchange', function(){ player.on('resolutionchange', function(){
console.info('Source changed to %s', player.src()) console.info('Source changed')
}) })
}); });

50
lib/videojs-resolution-switcher.js
View file

@ -71,8 +71,8 @@
if(!isPaused){ if(!isPaused){
this.player_.bigPlayButton.hide(); this.player_.bigPlayButton.hide();
} }
if(typeof customSourcePicker !== 'function' &&
typeof this.options_.customSourcePicker === 'function'){ if(typeof customSourcePicker !== 'function' && typeof this.options_.customSourcePicker === 'function'){
customSourcePicker = this.options_.customSourcePicker; customSourcePicker = this.options_.customSourcePicker;
} }
// Change player source and wait for loadeddata event, then play video // Change player source and wait for loadeddata event, then play video
@ -80,7 +80,7 @@
// Probably because of https://github.com/videojs/video-js-swf/issues/124 // 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) // 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'; 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'; handleSeekEvent = 'timeupdate';
} }
setSourcesSanitized(this.player_, this.src, this.options_.label, customSourcePicker).one(handleSeekEvent, function() { setSourcesSanitized(this.player_, this.src, this.options_.label, customSourcePicker).one(handleSeekEvent, function() {
@ -277,21 +277,51 @@
}); });
}else{ }else{
player.ready(function(){ player.ready(function(){
console.log(player.techName_);
if(player.techName_ === 'Youtube'){ if(player.techName_ === 'Youtube'){
console.log('yt'); player.tech_.ytPlayer.setPlaybackQuality('default');
player.tech_.ytPlayer.addEventListener('onPlaybackQualityChange', function(){
player.trigger('resolutionchange');
})
var q = player.tech_.ytPlayer.getAvailableQualityLevels(); var q = player.tech_.ytPlayer.getAvailableQualityLevels();
console.log(q);
player.one('play', function(){ player.one('play', function(){
console.log('asd');
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'}
}
var _customSourcePicker = function(_player, _sources, _label){
player.tech_.ytPlayer.setPlaybackQuality(_sources[0]._yt);
return player;
}
q = player.tech_.ytPlayer.getAvailableQualityLevels(); q = player.tech_.ytPlayer.getAvailableQualityLevels();
console.log(q);
var _sources = [];
for(var i = 0; i<q.length; i++){
_sources.push({
src: player.src().src,
type: player.src().type,
label: _yts[q[i]].label,
res: _yts[q[i]].res,
_yt: _yts[q[i]].yt
})
}
groupedSrc = bucketSources(_sources);
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res }, settings, label); var choosen = {label: 'auto', res: 0, sources: groupedSrc.label['auto']};
var menuButton = new ResolutionMenuButton(player, { sources: groupedSrc, initialySelectedLabel: choosen.label , initialySelectedRes: choosen.res, customSourcePicker: _customSourcePicker}, settings, label);
menuButton.el().classList.add('vjs-resolution-button'); menuButton.el().classList.add('vjs-resolution-button');
player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton); player.controlBar.resolutionSwitcher = player.controlBar.addChild(menuButton);
console.log(q);
}) })
} }
}) })