add showInToOut option to LargeVideoTimeline
This commit is contained in:
parent
aef603bf66
commit
2fc340d9bd
2 changed files with 31 additions and 5 deletions
|
@ -2189,6 +2189,9 @@ Video
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
}
|
}
|
||||||
|
.OxLargeVideoTimeline > div.OxOverlay {
|
||||||
|
z-index: 8;
|
||||||
|
}
|
||||||
.OxLargeVideoTimeline > div > img {
|
.OxLargeVideoTimeline > div > img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
|
@ -2199,7 +2202,7 @@ Video
|
||||||
width: 6px;
|
width: 6px;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
margin-left: -3px;
|
margin-left: -3px;
|
||||||
z-index: 8;
|
z-index: 7;
|
||||||
}
|
}
|
||||||
.OxLargeVideoTimeline .OxMarkerPointIn {
|
.OxLargeVideoTimeline .OxMarkerPointIn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -2207,14 +2210,14 @@ Video
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
margin-left: -6px;
|
margin-left: -6px;
|
||||||
z-index: 8;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
.OxLargeVideoTimeline .OxMarkerPointOut {
|
.OxLargeVideoTimeline .OxMarkerPointOut {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 63px;
|
top: 63px;
|
||||||
width: 7px;
|
width: 7px;
|
||||||
height: 7px;
|
height: 7px;
|
||||||
z-index: 8;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
.OxLargeVideoTimeline .OxMarkerPosition {
|
.OxLargeVideoTimeline .OxMarkerPosition {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -2222,7 +2225,7 @@ Video
|
||||||
width: 11px;
|
width: 11px;
|
||||||
height: 11px;
|
height: 11px;
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
z-index: 8;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
.OxLargeVideoTimeline .OxSubtitle {
|
.OxLargeVideoTimeline .OxSubtitle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -2239,7 +2242,7 @@ Video
|
||||||
color: rgb(255, 255, 255);
|
color: rgb(255, 255, 255);
|
||||||
cursor: default;
|
cursor: default;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
z-index: 8;
|
z-index: 7;
|
||||||
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||||
-o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
-o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||||
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||||
|
|
|
@ -21,6 +21,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
matches: [],
|
matches: [],
|
||||||
out: 0,
|
out: 0,
|
||||||
position: 0,
|
position: 0,
|
||||||
|
showInToOut: false,
|
||||||
subtitles: [],
|
subtitles: [],
|
||||||
type: '',
|
type: '',
|
||||||
width: 0
|
width: 0
|
||||||
|
@ -64,6 +65,28 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
setSubtitles();
|
setSubtitles();
|
||||||
|
|
||||||
|
if (self.options.showInToOut) {
|
||||||
|
if (self.options['in']) {
|
||||||
|
$('<div>')
|
||||||
|
.addClass('OxOverlay')
|
||||||
|
.css({
|
||||||
|
left: 0,
|
||||||
|
width: self.options['in'] * self.fps + 'px',
|
||||||
|
})
|
||||||
|
.appendTo(self.$timeline);
|
||||||
|
}
|
||||||
|
if (self.options.out) {
|
||||||
|
$('<div>')
|
||||||
|
.addClass('OxOverlay')
|
||||||
|
.css({
|
||||||
|
left: self.options.out * self.fps + 'px',
|
||||||
|
width: (self.options.duration - self.options.out) * self.fps + 'px',
|
||||||
|
height: self.height + 'px',
|
||||||
|
})
|
||||||
|
.appendTo(self.$timeline);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
self.options.cuts.forEach(function(v, i) {
|
self.options.cuts.forEach(function(v, i) {
|
||||||
self.$cuts[i] = $('<img>')
|
self.$cuts[i] = $('<img>')
|
||||||
.addClass('OxCut')
|
.addClass('OxCut')
|
||||||
|
|
Loading…
Reference in a new issue