From ba96bfb76c5578301dbfb4955d94861712e80616 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Fri, 19 Aug 2011 14:44:03 +0000 Subject: [PATCH] handle video formats and resolutions --- source/Ox.UI/Ox.UI.js | 30 +++++++++++++++++++- source/Ox.UI/js/Video/Ox.VideoEditor.js | 12 ++++---- source/Ox.UI/js/Video/Ox.VideoElement.js | 8 +++++- source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js | 2 -- source/Ox.UI/js/Video/Ox.VideoPlayer.js | 9 +++--- 5 files changed, 45 insertions(+), 16 deletions(-) diff --git a/source/Ox.UI/Ox.UI.js b/source/Ox.UI/Ox.UI.js index fa5f85cf..6ba1a473 100644 --- a/source/Ox.UI/Ox.UI.js +++ b/source/Ox.UI/Ox.UI.js @@ -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'), diff --git a/source/Ox.UI/js/Video/Ox.VideoEditor.js b/source/Ox.UI/js/Video/Ox.VideoEditor.js index fa1d9794..b96ed350 100644 --- a/source/Ox.UI/js/Video/Ox.VideoEditor.js +++ b/source/Ox.UI/js/Video/Ox.VideoEditor.js @@ -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, diff --git a/source/Ox.UI/js/Video/Ox.VideoElement.js b/source/Ox.UI/js/Video/Ox.VideoElement.js index 0cfaaf15..6a6d840c 100644 --- a/source/Ox.UI/js/Video/Ox.VideoElement.js +++ b/source/Ox.UI/js/Video/Ox.VideoElement.js @@ -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; diff --git a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js index f96ce840..2ad84657 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPanelPlayer.js @@ -29,8 +29,6 @@ Ox.VideoPanelPlayer = function(options, self) { showControls: true, subtitles: [], video: '', - videoHeight: 0, - videoWidth: 0, volume: 1, width: 0 }) diff --git a/source/Ox.UI/js/Video/Ox.VideoPlayer.js b/source/Ox.UI/js/Video/Ox.VideoPlayer.js index 210f9c42..8a48251a 100644 --- a/source/Ox.UI/js/Video/Ox.VideoPlayer.js +++ b/source/Ox.UI/js/Video/Ox.VideoPlayer.js @@ -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') } }); }