add video editor demo

2011-05-18 18:00:29 +02:00 · 2011-05-18 18:00:29 +02:00 · f8ec3fccf4
commit f8ec3fccf4
parent 8fe529df81
8 changed files with 5947 additions and 162 deletions
--- a/demos/videoeditor/index.html
+++ b/demos/videoeditor/index.html
@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>OxJS Video Editor Demo</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <script type="text/javascript" src="../../build/Ox.js"></script>
+        <script type="text/javascript" src="js/videoeditor.js"></script>
+    </head>
+    <body></body>
+</html>
--- a/demos/videoeditor/js/videoeditor.js
+++ b/demos/videoeditor/js/videoeditor.js
@ -0,0 +1,88 @@
+Ox.load('UI', {
+    debug: true,
+    theme: 'modern'
+}, function() {
+
+    Ox.get('srt/0393109.srt', function(srt) {
+
+        var subtitles = Ox.parseSRT(srt);
+
+        var $videoEditor = Ox.VideoEditor({
+            annotationsSize: 256,
+            duration: 6336.08,
+            find: 'dode',
+            getLargeTimelineImageURL: function(i) {
+                return 'http://next.0xdb.org/0393109/timelines/timeline.64.' + i + '.png';
+            },
+            getSmallTimelineImageURL: function(i) {
+                return 'http://next.0xdb.org/0393109/timelines/timeline.16.' + i + '.png';
+            },
+            getVideoImageURL: function(i) {
+                return 'png/0393109.png';
+            },
+            height: window.innerHeight - 129,
+            'in': 3128.76, 
+            out: 3130.72,
+            position: 3168.04,
+            posterFrame: 3168.04,
+            subtitles: subtitles,
+            video: {
+                96: 'http://next.0xdb.org/0393109/96p.webm',
+                240: 'http://next.0xdb.org/0393109/96p.webm?240p',
+                480: 'http://next.0xdb.org/0393109/96p.webm?480p'
+            },
+            videoHeight: 96,
+            videoWidth: 180,
+            width: window.innerWidth - 257
+        });
+
+        Ox.SplitPanel({
+            elements: [
+                {
+                    collapsible: true,
+                    element: Ox.Element(),
+                    resizable: true,
+                    resize: [128, 256, 384],
+                    size: 256
+                },
+                {
+                    element: Ox.SplitPanel({
+                        elements: [
+                            {
+                                collapsible: true,
+                                element: Ox.Element(),
+                                resizable: true,
+                                resize: [64, 128, 192],
+                                size: 128
+                            },
+                            {
+                                element: $videoEditor
+                            }
+                        ],
+                        orientation: 'vertical'
+                    })
+                    .bindEvent({
+                        resize: function(foo, size) {
+                            $videoEditor.options({
+                                width: size
+                            });
+                        }
+                    })
+                }
+            ],
+            orientation: 'horizontal'
+        })
+        .appendTo(Ox.UI.$body);
+
+        $videoEditor.$element.bindEvent({
+            resize: function(foo, size) {
+                Ox.print('HHHHHHHHH', foo, size)
+                $videoEditor.options({
+                    height: size
+                });
+            }
+        });
+
+    });
+
+});
--- a/demos/videoeditor/png/0393109.png
+++ b/demos/videoeditor/png/0393109.png
--- a/demos/videoeditor/srt/0393109.srt
+++ b/demos/videoeditor/srt/0393109.srt