This repository has been archived by the owner on May 21, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 38
/
index.html
60 lines (56 loc) · 4.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html5>
<html>
<head>
<title>Poporn Editor embedding demo</title>
<meta charset="utf-8">
<style type="text/css">
#toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 4em;
}
#toolbar h1 {
display: inline-block;
}
#editor {
position: absolute;
top: 4em;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="toolbar">
<h1>PopcornEditor</h1>
<button onclick="loadInfo()">Load sample project</button>
<a href="https://github.com/mozilla/popcorn-editor">Fork me on GitHub</a>
</div>
<div id="editor"></div>
<script src="PopcornEditor.js"></script>
<script>
popcorn = new PopcornEditor();
popcorn.listen(PopcornEditor.events.save, function(message) {
console.log(JSON.stringify(message))
});
popcorn.listen(PopcornEditor.events.loaded, function () {
var video = {
"thumbnail": "http://localhost:8000/media/cache/ff/6b/ff6beb78892298e3d2bec09c166bba2d.png",
"url": "https://d3fenhwk93s16g.cloudfront.net/3i9x0m/webm.webm",
"title": "Assessments San Francisco Move",
"duration": 3192,
"type": "AirMozilla"
};
popcorn.loadInfo(popcorn.createTemplate(video));
});
popcorn.init(document.querySelector('#editor'));
function loadInfo() {
var a = '{"template":"basic","author":"TODO","thumbnail":"http://localhost:8080/resources/icons/fb-logo.png","background":"#05c900","data":{"targets":[{"id":"Target0","name":"video-container","element":"video-container"}],"media":[{"id":"Media0","name":"Media0","url":"#t=,23.369","target":"video","duration":23.369,"popcornOptions":{"frameAnimation":true},"controls":true,"tracks":[{"name":"","id":"0","order":0,"trackEvents":[{"id":"TrackEvent0","type":"sequencer","popcornOptions":{"start":0,"source":["https://d3fenhwk93s16g.cloudfront.net/c9o8b0/hd_webm.webm?t=1436213450559ae0cad74cd&butteruid=1436213446270"],"fallback":"","denied":false,"end":23.369,"from":0,"title":"Safari Browsing","type":"AirMozilla","thumbnailSrc":"https://air.cdn.mozilla.net/media/cache/9f/ff/9fff395105bf200cd23a5f6f2f6df520.png","duration":23.369,"linkback":"","contentType":"","hidden":false,"target":"video-container","left":16.29148527836351,"top":0,"width":73.09152854617142,"height":100,"volume":100,"mute":false,"zindex":1000,"id":"TrackEvent0"},"track":"0","name":"TrackEvent0"}]},{"name":"","id":"2","order":1,"trackEvents":[{"id":"TrackEvent1","type":"sequencer","popcornOptions":{"start":6.827133479212254,"source":["https://d3fenhwk93s16g.cloudfront.net/m4u2k6/hd_webm.webm?t=1436213481559ae0e916b16&butteruid=1436213446271"],"fallback":"","denied":false,"end":16.027133479212253,"from":0,"title":"Testing my face","type":"AirMozilla","thumbnailSrc":"https://air.cdn.mozilla.net/media/cache/ef/55/ef555f851da046f5bcb833fb679654fd.png","duration":9.2,"linkback":"","contentType":"","hidden":false,"target":"video-container","left":24.058526495858025,"top":0,"width":75.84346862697606,"height":75.92954990215264,"volume":100,"mute":false,"zindex":999,"id":"TrackEvent1"},"track":"2","name":"TrackEvent1"}]}],"clipData":{"https://d3fenhwk93s16g.cloudfront.net/c9o8b0/hd_webm.webm?t=1436213450559ae0cad74cd":{"type":"AirMozilla","title":"Safari Browsing","source":"https://d3fenhwk93s16g.cloudfront.net/c9o8b0/hd_webm.webm?t=1436213450559ae0cad74cd","thumbnail":"https://air.cdn.mozilla.net/media/cache/9f/ff/9fff395105bf200cd23a5f6f2f6df520.png","duration":23.369},"https://d3fenhwk93s16g.cloudfront.net/m4u2k6/hd_webm.webm?t=1436213481559ae0e916b16":{"type":"AirMozilla","title":"Testing my face","source":"https://d3fenhwk93s16g.cloudfront.net/m4u2k6/hd_webm.webm?t=1436213481559ae0e916b16","thumbnail":"https://air.cdn.mozilla.net/media/cache/ef/55/ef555f851da046f5bcb833fb679654fd.png","duration":9.2}},"currentTime":0}]},"tags":["popcorn"]}'
popcorn.loadInfo(JSON.parse(a));
}
</script>
</body>
</html>