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

Ox.parseSRT

Browse source
This commit is contained in:
rolux 2011-05-13 00:12:41 +02:00
parent a19c271e8f
commit eef79f318a
4 changed files with 5709 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demos/video/js/video.js
View file

@ -9,11 +9,12 @@ Ox.load('UI', {
padding: '16px'
});
Ox.VideoPlayer({
height: 96 * 256/180,
timeline: timeline,
height: 96 * 384/180,//96 * 256/180,
subtitles: 'srt/' + id + '.srt',
timelineURL: timeline,
title: 'Brick',
url: url,
width: 256
videoURL: url,
width: 384//256
}).appendTo(Ox.UI.$body);
/*
var id = '0133093';

5560
demos/video/srt/0393109.srt Normal file
View file

File diff suppressed because it is too large Load diff

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

@ -1,12 +1,30 @@
/*@
Ox.VideoPlayer <f> Generic Video Player Element
(options, self) -> <o> Video Player
options <o> Options
subtitles <s|[o]> URL or SRT or subtitles object
start <n> Start (sec)
stop <n> Stop (sec)
text <s> Text
@*/
Ox.VideoPlayer = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
autoplay: false,
height: 192,
logoLink: '',
logoTitle: '',
logoURL: '',
position: 0,
timeline: '',
url: '',
showControls: false,
showVolume: false,
subtitles: [],
timelineURL: '',
title: '',
videoURL: '',
width: 256
})
.options(options || {})
@ -21,19 +39,30 @@ Ox.VideoPlayer = function(options, self) {
mouseleave: hideControls
});
if (Ox.isString(self.options.subtitles)) {
if (self.options.subtitles.indexOf('\n') > -1) {
self.options.subtitles = Ox.parseSRT(self.options.subtitles);
} else {
Ox.get(self.options.subtitles, function(data) {
self.options.subtitles = Ox.parseSRT(data);
});
//self.options.subtitles = [];
}
}
self.buffered = [];
self.controlsTimeout;
self.dragTimeout;
self.barHeight = 16;
self.outerBarWidth = self.options.width - 96;
self.innerBarWidth = self.outerBarWidth - self.barHeight;
self.markerOffset = -self.innerBarWidth - 8;
self.controlsHeight = 16;
self.outerTrackWidth = self.options.width - 96;
self.innerTrackWidth = self.outerTrackWidth - self.controlsHeight;
self.markerOffset = -self.innerTrackWidth - 8;
self.$video = Ox.VideoElement({
height: self.options.height,
paused: true,
url: self.options.url,
url: self.options.videoURL,
width: self.options.width
})
.css({
@ -105,13 +134,27 @@ Ox.VideoPlayer = function(options, self) {
})
.appendTo(that.$element);
self.$subtitle = $('<div>')
//.addClass('OxSubtitle')
.css({
position: 'absolute',
left: 0,
right: 0,
textAlign: 'center',
textShadow: 'rgba(0, 0, 0, 1) 0 0 4px',
color: 'rgb(255, 255, 255)'
})
.appendTo(that.$element);
setSubtitleSize();
self.$controls = Ox.Bar({
size: self.barHeight
size: self.controlsHeight
})
.css({
position: 'absolute',
bottom: 0,
width: self.options.width + 'px',
marginTop: self.options.height - self.barHeight + 'px',
})
.css({
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
@ -171,13 +214,13 @@ Ox.VideoPlayer = function(options, self) {
.bindEvent('click', togglePlay)
.appendTo(self.$buttons);
self.$outerBar = Ox.Element()
self.$outerTrack = Ox.Element()
.css({
float: 'left',
width: self.outerBarWidth + 'px',
height: self.barHeight + 'px',
width: self.outerTrackWidth + 'px',
height: self.controlsHeight + 'px',
background: 'rgba(0, 0, 0, 0.75)',
borderRadius: self.barHeight / 2 + 'px'
borderRadius: self.controlsHeight / 2 + 'px'
})
/*
.css({
@ -189,25 +232,25 @@ Ox.VideoPlayer = function(options, self) {
*/
.appendTo(self.$controls);
self.$innerBar = Ox.Element()
self.$innerTrack = Ox.Element()
.css({
float: 'left',
width: self.innerBarWidth + 'px',
height: self.barHeight + 'px',
marginLeft: self.barHeight / 2 + 'px'
width: self.innerTrackWidth + 'px',
height: self.controlsHeight + 'px',
marginLeft: self.controlsHeight / 2 + 'px'
})
.appendTo(self.$outerBar);
.appendTo(self.$outerTrack);
self.$timeline = $('<img>')
.attr({
src: self.options.timeline
src: self.options.timelineURL
})
.css({
float: 'left',
width: self.innerBarWidth + 'px',
height: self.barHeight + 'px'
width: self.innerTrackWidth + 'px',
height: self.controlsHeight + 'px'
})
.appendTo(self.$innerBar.$element);
.appendTo(self.$innerTrack.$element);
self.$buffered = $('<img>')
.attr({
@ -215,11 +258,11 @@ Ox.VideoPlayer = function(options, self) {
})
.css({
float: 'left',
marginLeft: -self.innerBarWidth + 'px',
width: self.innerBarWidth + 'px',
height: self.barHeight + 'px',
marginLeft: -self.innerTrackWidth + 'px',
width: self.innerTrackWidth + 'px',
height: self.controlsHeight + 'px',
})
.appendTo(self.$innerBar.$element);
.appendTo(self.$innerTrack.$element);
self.$positionMarker = $('<div>')
.css({
@ -248,14 +291,14 @@ Ox.VideoPlayer = function(options, self) {
})
)
)
.appendTo(self.$outerBar.$element);
.appendTo(self.$outerTrack.$element);
self.$trackInterface = Ox.Element()
.css({
float: 'left',
width: self.outerBarWidth + 'px',
height: self.barHeight + 'px',
marginLeft: - self.outerBarWidth + 'px'
width: self.outerTrackWidth + 'px',
height: self.controlsHeight + 'px',
marginLeft: - self.outerTrackWidth + 'px'
})
.appendTo(self.$controls);
@ -354,24 +397,24 @@ Ox.VideoPlayer = function(options, self) {
if ($.browser.mozilla) {
//Ox.print(e, e.layerX - 56)
return Ox.limit(
(e.layerX - 48 - self.barHeight / 2) / self.innerBarWidth * self.duration,
(e.layerX - 48 - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
0, self.duration
);
} else {
/*Ox.print(e.offsetX, Ox.limit(
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
(e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
0, self.duration
))*/
return Ox.limit(
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
(e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
0, self.duration
);
}
}
function getBufferedImageURL() {
var width = self.innerBarWidth,
height = self.barHeight,
var width = self.innerTrackWidth,
height = self.controlsHeight,
$canvas = $('<canvas>')
.attr({
width: width,
@ -399,6 +442,20 @@ Ox.VideoPlayer = function(options, self) {
return canvas.toDataURL();
}
function getSubtitle() {
var subtitle = '';
Ox.forEach(self.options.subtitles, function(v) {
if (
v['in'] <= self.options.position &&
v.out > self.options.position
) {
subtitle = v.text;
return false;
}
});
return subtitle;
}
function hideControls() {
Ox.print('!!!!!!', self.$positionInput.hasFocus())
if (!self.$positionInput.hasFocus()) {
@ -485,12 +542,33 @@ Ox.VideoPlayer = function(options, self) {
function setPosition(position) {
self.options.position = position;
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
setSubtitle();
self.$positionMarker.css({
marginLeft: self.innerBarWidth * position / self.duration + self.markerOffset + 'px',
marginLeft: self.innerTrackWidth * position / self.duration + self.markerOffset + 'px',
});
self.$position.html(Ox.formatDuration(position));
}
function setSubtitle() {
var subtitle = getSubtitle();
if (subtitle != self.subtitle) {
self.subtitle = subtitle;
self.$subtitle.html(
Ox.highlight(self.subtitle, self.options.find, 'Ox.Highlight')
.replace(/\n/g, '<br/>')
);
}
}
function setSubtitleSize() {
self.$subtitle.css({
bottom: parseInt(self.controlsHeight + self.options.height / 16) + 'px',
width: self.options.width + 'px',
fontSize: parseInt(self.options.height / 20) + 'px',
WebkitTextStroke: (self.options.height / 1000) + 'px rgb(0, 0, 0)'
});
}
function showLoadingIcon() {
self.$loadingIcon.animate({
opacity: 1

30
source/Ox.js
View file

@ -3940,6 +3940,36 @@ Ox.parsePath = function(str) {
};
}
/*@
Ox.parseSRT <f> Parses an srt subtitle file
(str) -> <o> Parsed subtitles
in <n> In point (sec)
out <n> Out point (sec)
text <s> Text
str <s> Contents of an srt subtitle file
> Ox.parseSRT('1\n01:02:00,000 --> 01:02:03,400\nHello World')
[{'in': 3720, out: 3723.4, text: 'Hello World'}]
@*/
Ox.parseSRT = function(str) {
return str.replace(/\r\n/g, '\n').replace(/\n+$/, '').split('\n\n')
.map(function(block) {
var lines = block.split('\n'), points;
lines.shift();
points = lines.shift().split(' --> ').map(function(point) {
return point.replace(',', ':').split(':')
.reduce(function(prev, curr, i) {
return prev + parseInt(curr, 10) *
[3600, 60, 1, 0.001][i];
}, 0);
});
return {
'in': points[0],
out: points[1],
text: lines.join('\n')
};
});
};
/*@
Ox.repeat <f> Repeat a value multiple times
Works for arrays, numbers and strings