Ox.parseSRT
This commit is contained in:
parent
a19c271e8f
commit
eef79f318a
4 changed files with 5709 additions and 40 deletions
|
@ -9,11 +9,12 @@ Ox.load('UI', {
|
||||||
padding: '16px'
|
padding: '16px'
|
||||||
});
|
});
|
||||||
Ox.VideoPlayer({
|
Ox.VideoPlayer({
|
||||||
height: 96 * 256/180,
|
height: 96 * 384/180,//96 * 256/180,
|
||||||
timeline: timeline,
|
subtitles: 'srt/' + id + '.srt',
|
||||||
|
timelineURL: timeline,
|
||||||
title: 'Brick',
|
title: 'Brick',
|
||||||
url: url,
|
videoURL: url,
|
||||||
width: 256
|
width: 384//256
|
||||||
}).appendTo(Ox.UI.$body);
|
}).appendTo(Ox.UI.$body);
|
||||||
/*
|
/*
|
||||||
var id = '0133093';
|
var id = '0133093';
|
||||||
|
|
5560
demos/video/srt/0393109.srt
Normal file
5560
demos/video/srt/0393109.srt
Normal file
File diff suppressed because it is too large
Load diff
|
@ -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) {
|
Ox.VideoPlayer = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
autoplay: false,
|
||||||
height: 192,
|
height: 192,
|
||||||
|
logoLink: '',
|
||||||
|
logoTitle: '',
|
||||||
|
logoURL: '',
|
||||||
position: 0,
|
position: 0,
|
||||||
timeline: '',
|
showControls: false,
|
||||||
url: '',
|
showVolume: false,
|
||||||
|
subtitles: [],
|
||||||
|
timelineURL: '',
|
||||||
|
title: '',
|
||||||
|
videoURL: '',
|
||||||
width: 256
|
width: 256
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
|
@ -21,19 +39,30 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
mouseleave: hideControls
|
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.buffered = [];
|
||||||
self.controlsTimeout;
|
self.controlsTimeout;
|
||||||
self.dragTimeout;
|
self.dragTimeout;
|
||||||
|
|
||||||
self.barHeight = 16;
|
self.controlsHeight = 16;
|
||||||
self.outerBarWidth = self.options.width - 96;
|
self.outerTrackWidth = self.options.width - 96;
|
||||||
self.innerBarWidth = self.outerBarWidth - self.barHeight;
|
self.innerTrackWidth = self.outerTrackWidth - self.controlsHeight;
|
||||||
self.markerOffset = -self.innerBarWidth - 8;
|
self.markerOffset = -self.innerTrackWidth - 8;
|
||||||
|
|
||||||
self.$video = Ox.VideoElement({
|
self.$video = Ox.VideoElement({
|
||||||
height: self.options.height,
|
height: self.options.height,
|
||||||
paused: true,
|
paused: true,
|
||||||
url: self.options.url,
|
url: self.options.videoURL,
|
||||||
width: self.options.width
|
width: self.options.width
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -105,13 +134,27 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that.$element);
|
.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({
|
self.$controls = Ox.Bar({
|
||||||
size: self.barHeight
|
size: self.controlsHeight
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
width: self.options.width + 'px',
|
width: self.options.width + 'px',
|
||||||
marginTop: self.options.height - self.barHeight + 'px',
|
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
backgroundImage: '-moz-linear-gradient(top, rgba(64, 64, 64, 0.5), rgba(0, 0, 0, 0.5))'
|
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)
|
.bindEvent('click', togglePlay)
|
||||||
.appendTo(self.$buttons);
|
.appendTo(self.$buttons);
|
||||||
|
|
||||||
self.$outerBar = Ox.Element()
|
self.$outerTrack = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
width: self.outerBarWidth + 'px',
|
width: self.outerTrackWidth + 'px',
|
||||||
height: self.barHeight + 'px',
|
height: self.controlsHeight + 'px',
|
||||||
background: 'rgba(0, 0, 0, 0.75)',
|
background: 'rgba(0, 0, 0, 0.75)',
|
||||||
borderRadius: self.barHeight / 2 + 'px'
|
borderRadius: self.controlsHeight / 2 + 'px'
|
||||||
})
|
})
|
||||||
/*
|
/*
|
||||||
.css({
|
.css({
|
||||||
|
@ -189,25 +232,25 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
*/
|
*/
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
|
|
||||||
self.$innerBar = Ox.Element()
|
self.$innerTrack = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
width: self.innerBarWidth + 'px',
|
width: self.innerTrackWidth + 'px',
|
||||||
height: self.barHeight + 'px',
|
height: self.controlsHeight + 'px',
|
||||||
marginLeft: self.barHeight / 2 + 'px'
|
marginLeft: self.controlsHeight / 2 + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$outerBar);
|
.appendTo(self.$outerTrack);
|
||||||
|
|
||||||
self.$timeline = $('<img>')
|
self.$timeline = $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
src: self.options.timeline
|
src: self.options.timelineURL
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
width: self.innerBarWidth + 'px',
|
width: self.innerTrackWidth + 'px',
|
||||||
height: self.barHeight + 'px'
|
height: self.controlsHeight + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$innerBar.$element);
|
.appendTo(self.$innerTrack.$element);
|
||||||
|
|
||||||
self.$buffered = $('<img>')
|
self.$buffered = $('<img>')
|
||||||
.attr({
|
.attr({
|
||||||
|
@ -215,11 +258,11 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
marginLeft: -self.innerBarWidth + 'px',
|
marginLeft: -self.innerTrackWidth + 'px',
|
||||||
width: self.innerBarWidth + 'px',
|
width: self.innerTrackWidth + 'px',
|
||||||
height: self.barHeight + 'px',
|
height: self.controlsHeight + 'px',
|
||||||
})
|
})
|
||||||
.appendTo(self.$innerBar.$element);
|
.appendTo(self.$innerTrack.$element);
|
||||||
|
|
||||||
self.$positionMarker = $('<div>')
|
self.$positionMarker = $('<div>')
|
||||||
.css({
|
.css({
|
||||||
|
@ -248,14 +291,14 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.appendTo(self.$outerBar.$element);
|
.appendTo(self.$outerTrack.$element);
|
||||||
|
|
||||||
self.$trackInterface = Ox.Element()
|
self.$trackInterface = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
width: self.outerBarWidth + 'px',
|
width: self.outerTrackWidth + 'px',
|
||||||
height: self.barHeight + 'px',
|
height: self.controlsHeight + 'px',
|
||||||
marginLeft: - self.outerBarWidth + 'px'
|
marginLeft: - self.outerTrackWidth + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
|
|
||||||
|
@ -354,24 +397,24 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
if ($.browser.mozilla) {
|
if ($.browser.mozilla) {
|
||||||
//Ox.print(e, e.layerX - 56)
|
//Ox.print(e, e.layerX - 56)
|
||||||
return Ox.limit(
|
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
|
0, self.duration
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
/*Ox.print(e.offsetX, Ox.limit(
|
/*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
|
0, self.duration
|
||||||
))*/
|
))*/
|
||||||
return Ox.limit(
|
return Ox.limit(
|
||||||
(e.offsetX - self.barHeight / 2) / self.innerBarWidth * self.duration,
|
(e.offsetX - self.controlsHeight / 2) / self.innerTrackWidth * self.duration,
|
||||||
0, self.duration
|
0, self.duration
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getBufferedImageURL() {
|
function getBufferedImageURL() {
|
||||||
var width = self.innerBarWidth,
|
var width = self.innerTrackWidth,
|
||||||
height = self.barHeight,
|
height = self.controlsHeight,
|
||||||
$canvas = $('<canvas>')
|
$canvas = $('<canvas>')
|
||||||
.attr({
|
.attr({
|
||||||
width: width,
|
width: width,
|
||||||
|
@ -399,6 +442,20 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
return canvas.toDataURL();
|
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() {
|
function hideControls() {
|
||||||
Ox.print('!!!!!!', self.$positionInput.hasFocus())
|
Ox.print('!!!!!!', self.$positionInput.hasFocus())
|
||||||
if (!self.$positionInput.hasFocus()) {
|
if (!self.$positionInput.hasFocus()) {
|
||||||
|
@ -485,12 +542,33 @@ Ox.VideoPlayer = function(options, self) {
|
||||||
function setPosition(position) {
|
function setPosition(position) {
|
||||||
self.options.position = position;
|
self.options.position = position;
|
||||||
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
|
//Ox.print(-self.barWidth - 4 + self.barWidth * position / self.duration)
|
||||||
|
setSubtitle();
|
||||||
self.$positionMarker.css({
|
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));
|
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() {
|
function showLoadingIcon() {
|
||||||
self.$loadingIcon.animate({
|
self.$loadingIcon.animate({
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
30
source/Ox.js
30
source/Ox.js
|
@ -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
|
Ox.repeat <f> Repeat a value multiple times
|
||||||
Works for arrays, numbers and strings
|
Works for arrays, numbers and strings
|
||||||
|
|
Loading…
Reference in a new issue