extended video demo
This commit is contained in:
rolux
parent
568629fb34
commit
4255470e29
5 changed files with 628 additions and 323 deletions
|
|
@ -2,37 +2,154 @@ Ox.load('UI', {
|
|||
debug: true,
|
||||
theme: 'modern'
|
||||
}, function() {
|
||||
var id = '0393109';
|
||||
var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
|
||||
var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
|
||||
Ox.UI.$body.css({
|
||||
padding: '16px'
|
||||
});
|
||||
var id = '0393109',
|
||||
poster = 'http://next.0xdb.org/' + id + '/poster.jpg',
|
||||
timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png',
|
||||
url = 'http://next.0xdb.org/' + id + '/96p.webm',
|
||||
videoSize = getVideoSize(),
|
||||
$videos = [
|
||||
Ox.VideoPlayer({
|
||||
controls: ['play', 'mute', 'size', 'scale', 'timeline', 'position'],
|
||||
height: 96 * 384/180,//96 * 256/180,
|
||||
controls: ['play', 'mute', 'scale', 'timeline', 'position'],
|
||||
enableKeyboard: true,
|
||||
focus: 'mouseenter',
|
||||
height: 192,
|
||||
logoLink: 'http://next.0xdb.org/' + id,
|
||||
logoTitle: 'Watch on 0xdb',
|
||||
logo: 'png/logo.png',
|
||||
paused: true,
|
||||
scaleToFill: true,
|
||||
poster: poster,
|
||||
showIconOnLoad: true,
|
||||
showProgress: false,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
timeline: timeline,
|
||||
title: '<b>Brick</b> - Rian Johnson - 2005',
|
||||
video: url,
|
||||
width: 500//384//256
|
||||
}).appendTo(Ox.UI.$body);
|
||||
/*
|
||||
var id = '0133093';
|
||||
var url = 'http://next.0xdb.org/' + id + '/96p.webm?' + Ox.random(1000000);
|
||||
var timeline = 'http://next.0xdb.org/' + id + '/timeline.16.png';
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: 360
|
||||
})
|
||||
.css({
|
||||
margin: '16px'
|
||||
}),
|
||||
Ox.VideoPlayer({
|
||||
height: 96 * 256/230,
|
||||
height: 192,
|
||||
'in': 3128.725,
|
||||
//keepIconVisible: true,
|
||||
out: 3130.725,
|
||||
paused: true,
|
||||
playInToOut: true,
|
||||
//preload: 'none',
|
||||
showIcon: true,
|
||||
showIconOnLoad: true,
|
||||
timeline: timeline,
|
||||
url: url,
|
||||
width: 256
|
||||
}).css({
|
||||
left: '300px'
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: 360
|
||||
})
|
||||
.css({
|
||||
margin: '16px'
|
||||
}),
|
||||
Ox.VideoPlayer({
|
||||
controls: ['play', 'playInToOut', 'mute', 'size', 'space', 'position'],
|
||||
externalControls: true,
|
||||
height: videoSize.height,
|
||||
'in': 3128.725,
|
||||
out: 3130.725,
|
||||
paused: true,
|
||||
showMilliseconds: 2,
|
||||
subtitles: 'srt/' + id + '.srt',
|
||||
timeline: timeline,
|
||||
video: url + '?' + + Ox.random(1000000),
|
||||
width: videoSize.width
|
||||
})
|
||||
.css({
|
||||
margin: '16px'
|
||||
})
|
||||
];
|
||||
window.$videos = $videos
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Element()
|
||||
.append($videos[0])
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videos[0].options({height: size - 32});
|
||||
}
|
||||
}),
|
||||
size: 224,
|
||||
resizable: true,
|
||||
resize: [100, 400]
|
||||
},
|
||||
{
|
||||
element: Ox.Element()
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videos[0].options({width: size - 32});
|
||||
}
|
||||
}),
|
||||
size: 392,
|
||||
resizable: true,
|
||||
resize: [200, 600]
|
||||
},
|
||||
{
|
||||
element: Ox.Element()
|
||||
.append($videos[1])
|
||||
.bindEvent({
|
||||
resize: resizeVideo
|
||||
})
|
||||
},
|
||||
{
|
||||
element: Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: Ox.Element()
|
||||
.append($videos[2])
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videos[2].options({height: size - 48});
|
||||
}
|
||||
}),
|
||||
size: 240,
|
||||
resizable: true,
|
||||
resize: [100, 400]
|
||||
},
|
||||
{
|
||||
element: Ox.Element()
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function(foo, size) {
|
||||
$videos[2].options({width: size - 32});
|
||||
}
|
||||
}),
|
||||
size: 392,
|
||||
resizable: true,
|
||||
resize: [200, 600]
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
}).appendTo(Ox.UI.$body);
|
||||
*/
|
||||
|
||||
function getVideoSize() {
|
||||
var size = {},
|
||||
widths = $videos ? $videos[0].options('width') + $videos[2].options('width') : 720
|
||||
size.width = window.innerWidth - widths - 98;
|
||||
size.height = Math.round(size.width / 180 * 96);
|
||||
return size;
|
||||
}
|
||||
function resizeVideo() {
|
||||
var size = getVideoSize();
|
||||
$videos[1].options({
|
||||
width: size.width,
|
||||
height: size.height
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1647,7 +1647,6 @@ Video
|
|||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
.OxVideoPlayer > .OxBar .OxInputGroup {
|
||||
//width: 98px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -34,8 +34,13 @@ Ox.Tooltip = function(options, self) {
|
|||
return that;
|
||||
};
|
||||
|
||||
// can pass event instead of x/y
|
||||
that.show = function(x, y) {
|
||||
var left, top, width, height;
|
||||
if (arguments.length == 1) {
|
||||
y = arguments[0].clientY;
|
||||
x = arguments[0].clientX;
|
||||
}
|
||||
$('.OxTooltip').remove(); // fixme: don't use DOM
|
||||
that.appendTo(Ox.UI.$body);
|
||||
width = that.width();
|
||||
|
|
|
|||
|
|
@ -459,6 +459,12 @@ Video
|
|||
background: rgb(48, 48, 48);
|
||||
}
|
||||
|
||||
.OxThemeModern .OxVideo.OxFocus {
|
||||
-moz-box-shadow: 0 0 2px rgb(128, 128, 128);
|
||||
-webkit-box-shadow: 0 0 2px rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeModern .OxVideoPlayer {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue