add chapter marker, use in video edit panel
This commit is contained in:
parent
ef26d84c9a
commit
55fbe25ccc
4 changed files with 10 additions and 2 deletions
|
@ -2328,6 +2328,7 @@ Video
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
}
|
||||||
|
.OxLargeVideoTimeline .OxChapter,
|
||||||
.OxLargeVideoTimeline .OxCut {
|
.OxLargeVideoTimeline .OxCut {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 62px;
|
top: 62px;
|
||||||
|
|
|
@ -13,6 +13,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
chapters: [],
|
||||||
cuts: [],
|
cuts: [],
|
||||||
disabled: false,
|
disabled: false,
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
@ -95,13 +96,15 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
self.options.cuts.forEach(function(v, i) {
|
var chapters = self.options.chapters.slice(1);
|
||||||
|
Ox.unique(chapters.concat(self.options.cuts)).forEach(function(v, i) {
|
||||||
self.$cuts[i] = $('<img>')
|
self.$cuts[i] = $('<img>')
|
||||||
.addClass('OxCut')
|
.addClass(Ox.contains(chapters, v) ? 'OxChapter' : 'OxCut')
|
||||||
.css({left: (v * self.fps) + 'px'})
|
.css({left: (v * self.fps) + 'px'})
|
||||||
.appendTo(self.$timeline);
|
.appendTo(self.$timeline);
|
||||||
});
|
});
|
||||||
// performs better
|
// performs better
|
||||||
|
self.$timeline.find('.OxChapter').attr({src: Ox.UI.getImageURL('markerChapter')});
|
||||||
self.$timeline.find('.OxCut').attr({src: Ox.UI.getImageURL('markerCut')});
|
self.$timeline.find('.OxCut').attr({src: Ox.UI.getImageURL('markerCut')});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -460,6 +460,7 @@ Ox.VideoEditPanel = function(options, self) {
|
||||||
|
|
||||||
function getTimeline() {
|
function getTimeline() {
|
||||||
return Ox.LargeVideoTimeline({
|
return Ox.LargeVideoTimeline({
|
||||||
|
chapters: self.chapters,
|
||||||
cuts: self.cuts,
|
cuts: self.cuts,
|
||||||
duration: self.options.duration,
|
duration: self.options.duration,
|
||||||
getImageURL: self.options.getLargeTimelineURL,
|
getImageURL: self.options.getLargeTimelineURL,
|
||||||
|
|
3
source/Ox.UI/svg/markerChapter.svg
Normal file
3
source/Ox.UI/svg/markerChapter.svg
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
|
||||||
|
<polygon points="96,248 96,8 160,8 160,248" fill="#FFFFFF" stroke="#000000" stroke-width="16"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 172 B |
Loading…
Reference in a new issue