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

handle video formats and resolutions

Browse source
This commit is contained in:
rlx 2011-08-19 14:44:03 +00:00
parent c5bde89971
commit ba96bfb76c
5 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
source/Ox.UI/Ox.UI.js
View file

@ -271,7 +271,6 @@ Ox.load.UI = function(options, callback) {
Ox.UI.getImageName = function(url) {
return imageNames[url];
};
Ox.UI.getImageURL = function(name, theme) {
theme = theme || Ox.Theme();
// fixme: not the best idea to do this here
@ -280,6 +279,35 @@ Ox.load.UI = function(options, callback) {
}
return imageURLs[theme + '/' + name];
};
Ox.UI.getVideoFormat = function(formats) {
var aliases = {
'mp4': 'h264',
'm4v': 'h264',
'ogv': 'ogg'
},
format,
tests = {
'h264': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
'ogg': 'video/ogg; codecs="theora, vorbis"',
'webm': 'video/webm; codecs="vp8, vorbis"'
},
userAgent = navigator.userAgent.toLowerCase();
video = document.createElement('video');
Ox.forEach(formats, function(f) {
var alias = aliases[f] || f;
if (!!(video.canPlayType && video.canPlayType(tests[alias]).replace('no', ''))) {
// disable WebM on Safari/Perian, seeking does not work
if (!(
alias == 'webm' && /safari/.test(userAgent)
&& !/chrome/.test(userAgent) && !/linux/.test(userAgent)
)) {
format = f;
return false;
}
}
});
return format;
},
Ox.UI.hideLoadingScreen = function() {
//Ox.print('hideLoadingScreen')
var $div = $('.OxLoadingScreen'),

12
source/Ox.UI/js/Video/Ox.VideoEditor.js
View file

@ -31,8 +31,7 @@ Ox.VideoEditor = function(options, self) {
showAnnotations: false,
showLargeTimeline: true,
subtitles: [],
videoHeight: 0,
videoWidth: 0,
videoRatio: 16/9,
videoSize: 'small',
video: '',
width: 0
@ -140,7 +139,6 @@ Ox.VideoEditor = function(options, self) {
$timeline: [],
controlsHeight: 16,
margin: 8,
videoRatio: self.options.videoWidth / self.options.videoHeight
});
self.words = [];
@ -772,7 +770,7 @@ Ox.VideoEditor = function(options, self) {
left: (i + 0.5) * self.margin + width,
top: self.margin / 2,
width: widths[i],
height: Math.round(widths[1] / self.videoRatio)
height: Math.round(widths[1] / self.options.videoRatio)
};
width += widths[i];
});
@ -780,15 +778,15 @@ Ox.VideoEditor = function(options, self) {
size.player[0] = {
left: self.margin / 2,
top: self.margin / 2,
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.options.videoRatio) * 2/3),
};
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
size.player[0].height = Math.round(size.player[0].width / self.options.videoRatio);
size.player[1] = {
left: size.player[0].left + size.player[0].width + self.margin,
top: size.player[0].top,
width: contentWidth - 3 * self.margin - size.player[0].width
};
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
size.player[1].height = Math.ceil(size.player[1].width / self.options.videoRatio);
size.player[2] = {
left: size.player[1].left,
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,

8
source/Ox.UI/js/Video/Ox.VideoElement.js
View file

@ -39,6 +39,8 @@ Ox.VideoElement = function(options, self) {
setCurrentPart(self.currentPart + 1);
self.video.play();
} else {
self.ended = true;
self.paused = true;
that.triggerEvent('ended');
}
},
@ -89,7 +91,6 @@ Ox.VideoElement = function(options, self) {
}
function setCurrentPart(part) {
Ox.print('sCP', part)
var css = {};
['left', 'top', 'width', 'height'].forEach(function(key) {
css[key] = self.$video.css(key);
@ -130,6 +131,7 @@ Ox.VideoElement = function(options, self) {
that.currentTime = function() {
var ret;
self.ended = false;
if (arguments.length == 0) {
ret = getCurrentTime();
} else {
@ -159,6 +161,10 @@ Ox.VideoElement = function(options, self) {
};
that.play = function() {
if (self.ended) {
that.currentTime(0);
self.ended = false;
}
self.paused = false;
self.video.play();
return that;

2
source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js
View file

@ -29,8 +29,6 @@ Ox.VideoPanelPlayer = function(options, self) {
showControls: true,
subtitles: [],
video: '',
videoHeight: 0,
videoWidth: 0,
volume: 1,
width: 0
})

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

@ -124,6 +124,8 @@ Ox.VideoPlayer = function(options, self) {
.options(options || {})
.addClass('OxVideoPlayer');
Ox.print('VIDEO PLAYER OPTIONS', self.options)
Ox.UI.$window.bind({
resize: function() {
self.options.fullscreen && setSizes();
@ -133,14 +135,11 @@ 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];
}
self.video = self.options.video[self.options.resolution];
*/
self.video = self.options.video(self.options.resolution, self.options.format)
}
if (self.options.playInToOut) {
@ -238,12 +237,12 @@ Ox.VideoPlayer = function(options, self) {
mouseenter: function() {
showControls();
self.mouseHasLeft = false;
Ox.print('MOUSE HAS ENTERED')
//Ox.print('MOUSE HAS ENTERED')
},
mouseleave: function() {
hideControls();
self.mouseHasLeft = true;
Ox.print('MOUSE HAS LEFT')
//Ox.print('MOUSE HAS LEFT')
}
});
}