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