0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

support multiple resolutions per video player

Browse source
This commit is contained in:
rolux 2011-05-17 18:02:25 +02:00
parent c7167462e8
commit 26dd7debe3
2 changed files with 153 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demos/video/js/video.js
View file

@ -32,7 +32,7 @@ Ox.load('UI', {
videoSize = getVideoSize(),
$videos = [
Ox.VideoPlayer({
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position', 'resolution'],
controlsTop: ['fullscreen', 'title', 'find'],
enableFind: true,
enableFullscreen: true,
@ -45,12 +45,16 @@ Ox.load('UI', {
logo: 'png/logo.png',
paused: true,
poster: poster,
showIconOnLoad: true,
//showIconOnLoad: true,
showProgress: false,
subtitles: 'srt/' + id + '.srt',
timeline: 'png/timeline.16.png',
title: 'Brick - Rian Johnson - 2005',
video: url + '?' + + Ox.random(1000000),
video: {
96: url + '?' + + Ox.random(1000000),
360: url + '?' + + Ox.random(1000000),
1080: url + '?' + + Ox.random(1000000)
},
width: 360
})
.css({

160
source/Ox.UI/js/Video/Ox.VideoPlayer.js
View file

@ -13,8 +13,8 @@ Ox.VideoPlayer <f> Generic Video Player
controls <[[s]]|[[][]]> Controls, first top, then bottom, from left to right
Can be 'fullscreen', 'scale', 'title', 'find', 'menu',
'play', 'playInToOut', 'mute', 'volume', 'size', 'timeline', 'space',
'position', 'settings'. The 'space' control is just empty space
that separates left-aligned from right-aligned controls.
'position', 'resolution', 'settings'. The 'space' control is just
empty space that separates left-aligned from right-aligned controls.
duration <n|-1> Duration (sec)
enableFind <b|false> If true, enable find
enableFullscreen <b|false> If true, enable fullscreen
@ -40,6 +40,7 @@ Ox.VideoPlayer <f> Generic Video Player
posterFrame <n|-1> Position of poster frame (sec)
preload <s|'auto'> 'auto', 'metadata' or 'none'
out <n|-1> Out point (sec)
resolution <n|0> resolution
scaleToFill <b|false> If true, scale to fill (otherwise, scale to fit)
showFind <b|false> If true, show find input
showHours <b|false> If true, don't show hours for videos shorter than one hour
@ -58,7 +59,8 @@ Ox.VideoPlayer <f> Generic Video Player
timeline <s> Timeline image URL
title <s|''> Video title
type <s|'play'> 'play', 'in' or 'out'
video <s|''> Video URL
video <s|o|''> Video URL
String or object ({resolution: url, resolution: url, ...})
volume <n|1> Volume (0-1)
width <n|256> Width in px
@*/
@ -96,6 +98,7 @@ Ox.VideoPlayer = function(options, self) {
poster: '',
preload: 'auto',
out: 0,
resolution: 0,
scaleToFill: false,
showFind: false,
showHours: false,
@ -126,6 +129,17 @@ Ox.VideoPlayer = function(options, self) {
}
});
if (Ox.isString(self.options.video)) {
self.video = self.options.video;
} else {
self.resolutions = Ox.sort(Object.keys(self.options.video));
if (!(self.options.resolution in self.options.video)) {
self.options.resolution = self.resolutions[0];
}
Ox.print('resolutions', self.resolutions)
self.video = self.options.video[self.options.resolution];
}
self['in'] = self.options.playInToOut ? self.options['in'] : 0,
self.out = self.options.playInToOut ? self.options.out : self.options.duration;
self.options.duration = self.out - self['in'];
@ -268,7 +282,7 @@ Ox.VideoPlayer = function(options, self) {
self.$video = $('<video>')
.attr(Ox.extend({
preload: self.options.preload,
src: self.options.video
src: self.video
}, !self.options.paused ? {
autoplay: 'autoplay'
} : {}/*, self.options.poster ? {
@ -608,7 +622,6 @@ Ox.VideoPlayer = function(options, self) {
+ self.options.showMilliseconds * 6;
self.$position = $('<div>')
.addClass('foo')
.css({
float: 'left',
width: (self.positionWidth - 4) + 'px',
@ -673,7 +686,117 @@ Ox.VideoPlayer = function(options, self) {
.css({
background: '-webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(64, 64, 64, 0.5))'
});
} else if (control == 'resolution') {
self.$resolutionButton = $('<div>')
.css({
float: 'left',
width: '28px',
height: '12px',
padding: '2px',
fontSize: '9px',
textAlign: 'center',
color: 'rgb(255, 255, 255)',
cursor: 'default'
})
.html(self.options.resolution + 'p')
.bind({
click: function() {
self.$resolution.toggle();
}
})
.appendTo(self['$controls' + titlecase].$element);
self.$resolution = $('<div>')
.css({
position: 'absolute',
right: 0,
bottom: '16px',
width: '48px',
height: (self.resolutions.length * 16) + 'px',
background: 'transparent'
})
.bind({
click: function(e) {
var resolution = $(e.target).parent().data('resolution');
self.$resolution.hide();
if (resolution != self.options.resolution) {
self.$resolution.children().each(function() {
var $this = $(this);
$this.children()[1].src =
$this.data('resolution') == resolution ?
Ox.UI.getImagePath('symbolCheck.svg') :
Ox.UI.PATH + 'png/transparent.png'
});
self.$resolutionButton.html(resolution + 'p');
self.options.resolution = resolution
setResolution();
}
}
})
.hide()
.appendTo(that.$element);
self.resolutions.forEach(function(resolution, i) {
var $item = $('<div>')
.css({
height: '16px',
background: 'rgba(32, 32, 32, 0.5)'
})
.data({
resolution: resolution
})
.bind({
mouseenter: function() {
$(this)
.css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
.css({
backgroundImage: '-webkit-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
})
},
mouseleave: function() {
$(this).css({
background: 'rgba(64, 64, 64, 0.25)'
});
}
})
.appendTo(self.$resolution);
if (i == 0) {
$item.css({
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px'
})
}
$('<div>')
.css({
float: 'left',
width: '32px',
height: '14px',
paddingTop: '2px',
fontSize: '9px',
textAlign: 'right',
cursor: 'default'
})
.html(resolution + 'p')
.appendTo($item);
$('<img>')
.attr({
src: resolution == self.options.resolution ?
Ox.UI.getImagePath('symbolCheck.svg') :
Ox.UI.PATH + 'png/transparent.png'
})
.css({
float: 'left',
width: '9px',
height: '9px',
padding: '3px 3px 4px 4px'
})
.appendTo($item);
})
} else if (control == 'scale') {
self.$scaleButton = Ox.Button({
@ -1202,7 +1325,8 @@ Ox.VideoPlayer = function(options, self) {
self.options.controlsBottom.reduce(function(prev, curr) {
return prev + (
curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth : 16
curr == 'position' ? self.positionWidth :
curr == 'resolution' ? 32 : 16
);
}, 0);
}
@ -1248,6 +1372,9 @@ Ox.VideoPlayer = function(options, self) {
self.$volume && self.$volume.is(':visible') && self.$volume.animate({
opacity: 0
}, 250);
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
opacity: 0
}, 250);
self.$logo && self.$logo.animate({
top: getCSS('logo').top,
opacity: 0.25
@ -1272,6 +1399,8 @@ Ox.VideoPlayer = function(options, self) {
function loadedmetadata() {
Ox.print('LOADEDMETADATA')
var hadDuration = !!self.options.duration;
self.loaded = true;
@ -1402,6 +1531,12 @@ Ox.VideoPlayer = function(options, self) {
self.$position && self.$position.html(formatPosition());
}
function setResolution() {
self.loaded = false;
showLoadingIcon();
self.video.src = self.options.video[self.options.resolution];
}
function setSizes(callback) {
var ms = callback ? 250 : 0;
self.width = self.options.fullscreen ? window.innerWidth : self.options.width;
@ -1410,13 +1545,7 @@ Ox.VideoPlayer = function(options, self) {
self.iconLeft = parseInt((self.width - self.iconSize) / 2),
self.iconTop = parseInt((self.height - self.iconSize) / 2);
if (self.$timeline || self.$spaceBottom) {
self.timelineWidth = self.width -
self.options.controlsBottom.reduce(function(prev, curr) {
return prev + (
curr == 'timeline' || curr == 'space' ? 0 :
curr == 'position' ? self.positionWidth : 16
);
}, 0);
self.timelineWidth = getTimelineWidth();
if (self.$timeline) {
self.timelineImageWidth = self.timelineWidth - self.barHeight;
}
@ -1512,6 +1641,9 @@ Ox.VideoPlayer = function(options, self) {
self.$volume && self.$volume.is(':visible') && self.$volume.animate({
opacity: 1
}, 250);
self.$resolution && self.$resolution.is(':visible') && self.$resolution.animate({
opacity: 1
}, 250);
self.$logo && self.$logo.animate({
top: getCSS('logo').top,
opacity: 0.5