initial commit
This commit is contained in:
rolux
commit
478e9f8b80
2 changed files with 168 additions and 0 deletions
10
index.html
Normal file
10
index.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>video</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="https://oxjs.org/dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/index.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
158
js/index.js
Normal file
158
js/index.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
Ox.load('UI', function() {
|
||||
|
||||
window.pandora = {site: {map: 'auto'}};
|
||||
|
||||
window.app = {
|
||||
$ui: {}
|
||||
};
|
||||
|
||||
Ox.getJSON(['json/cuts0.json', 'json/cuts1.json', 'json/hashes.json'], function(data) {
|
||||
var video = {
|
||||
duration: 6242.24,
|
||||
id: '0084628',
|
||||
resolution: 96,
|
||||
ratio: 158/96,
|
||||
src: 'https://video0.0xdb.org/0084628/96p1.webm'
|
||||
};
|
||||
app.$ui.video = Ox.VideoEditor({
|
||||
annotationsRange: 'position',
|
||||
cuts: data['json/cuts0.json'],
|
||||
duration: video.duration,
|
||||
enableSubtitles: true,
|
||||
getFrameURL: function(position) {
|
||||
return 'https://0xdb.org/' + video.id + '/' + video.resolution
|
||||
+ 'p' + position + '.jpg';
|
||||
},
|
||||
getLargeTimelineURL: function(type, i) {
|
||||
return 'http://c.local/timelines/0084628/timelinecuts' + '64p' + i + '.jpg';
|
||||
return 'https://0xdb.org/' + video.id
|
||||
+ '/timeline' + type + '64p' + i + '.jpg';
|
||||
},
|
||||
getSmallTimelineURL: function(type, i) {
|
||||
return 'https://0xdb.org/' + video.id
|
||||
+ '/timeline' + type + '16p' + i + '.jpg';
|
||||
},
|
||||
height: window.innerHeight - 24,
|
||||
layers: [{
|
||||
id: 'shape',
|
||||
item: 'Shape Hash',
|
||||
items: data['json/hashes.json'].filter(function(value) {
|
||||
return value.type == 'shape';
|
||||
}).map(function(value) {
|
||||
return {
|
||||
'in': value['in'],
|
||||
out: value.out,
|
||||
value: '<img src="' + value.composite + '"><br>' + value.hash + '<br>'
|
||||
+ value.similar.map(function(value) {
|
||||
var position = Ox.formatDuration(value.position, 3);
|
||||
return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
|
||||
}).join('<br>')
|
||||
};
|
||||
}),
|
||||
title: 'Shape Hashes',
|
||||
type: 'text'
|
||||
}, {
|
||||
id: 'color',
|
||||
item: 'Color Hash',
|
||||
items: data['json/hashes.json'].filter(function(value) {
|
||||
return value.type == 'color';
|
||||
}).map(function(value) {
|
||||
return {
|
||||
'in': value['in'],
|
||||
out: value.out,
|
||||
value: value.hash + '<br>' + value.similar.map(function(value) {
|
||||
var position = Ox.formatDuration(value.position, 3);
|
||||
return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
|
||||
}).join('<br>')
|
||||
};
|
||||
}),
|
||||
title: 'Color Hashes',
|
||||
type: 'text'
|
||||
},{
|
||||
id: 'p',
|
||||
item: 'P Hash',
|
||||
items: data['json/hashes.json'].filter(function(value) {
|
||||
return value.type == 'pHash';
|
||||
}).map(function(value) {
|
||||
return {
|
||||
'in': value['in'],
|
||||
out: value.out,
|
||||
value: value.hash + '<br>' + value.similar.map(function(value) {
|
||||
var position = Ox.formatDuration(value.position, 3);
|
||||
return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
|
||||
}).join('<br>')
|
||||
};
|
||||
}),
|
||||
title: 'P Hashes',
|
||||
type: 'text'
|
||||
}, {
|
||||
id: 'dct',
|
||||
item: 'DCT Hash',
|
||||
items: data['json/hashes.json'].filter(function(value) {
|
||||
return value.type == 'dct';
|
||||
}).map(function(value) {
|
||||
return {
|
||||
'in': value['in'],
|
||||
out: value.out,
|
||||
value: value.hash + '<br>' + value.similar.map(function(value) {
|
||||
var position = Ox.formatDuration(value.position, 3);
|
||||
return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
|
||||
}).join('<br>')
|
||||
};
|
||||
}),
|
||||
title: 'DCT Hashes',
|
||||
type: 'text'
|
||||
}],
|
||||
resolution: video.resolution,
|
||||
showAnnotations: true,
|
||||
showLayers: {shape: true, color: true, dct: true},
|
||||
subtitles: data['json/cuts1.json'].map(function(position) {
|
||||
return {'in': position - 0.08, out: position - 0.04, text: ''};
|
||||
}),
|
||||
timeline: 'antialias',
|
||||
timelines: [
|
||||
{id: 'antialias', title: 'Anti-Alias'},
|
||||
{id: 'slitscaqn', title: 'Slit-Scan'}
|
||||
],
|
||||
width: window.innerWidth,
|
||||
video: {
|
||||
96: [{duration: video.duration, src: video.src}]
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
position: function(data) {
|
||||
window.location.hash = '#' + Ox.formatDuration(data.position, 3);
|
||||
}
|
||||
});
|
||||
app.$ui.panel.replaceElement(1, app.$ui.video);
|
||||
Ox.$window.on({
|
||||
hashchange: hashchange
|
||||
});
|
||||
hashchange();
|
||||
var count = Ox.count(data['json/cuts0.json'].map(function(position, i) {
|
||||
return i == 0 ? 0 : Math.round((position - data['json/cuts0.json'][i - 1]) * 25) / 25;
|
||||
}));
|
||||
Ox.print(
|
||||
data['json/cuts0.json'].length,
|
||||
JSON.stringify(Object.keys(count).sort().map(function(key) {
|
||||
return [key, count[key]];
|
||||
}))
|
||||
);
|
||||
});
|
||||
|
||||
app.$ui.panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: Ox.Bar({size: 24}), size: 24},
|
||||
{element: Ox.Element()}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
|
||||
function hashchange() {
|
||||
var position = Ox.parseDuration(window.location.hash.slice(1));
|
||||
app.$ui.video.options({position: position});
|
||||
window.location.hash = '#' + Ox.formatDuration(position, 3);
|
||||
}
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue