oxjs/demos/video/js/video.js

Ox.load('UI', {
    debug: true,
    theme: 'modern'
}, function() {

    var $foo, $bar;

    var id = '0393109',
        poster = 'png/poster.png',
        results = [
            {'in': 190.335, out: 192.353},
            {'in': 1185.215, out: 1188.115},
            {'in': 1784.525, out: 1785.915},
            {'in': 1786.015, out: 1787.835},
            {'in': 3087.365, out: 3090.275},
            {'in': 3704.915, out: 3706.795},
            {'in': 3706.895, out: 3709.615},
            {'in': 4061.655, out: 4063.95},
            {'in': 4531.775, out: 4533.415},
            {'in': 4946.095, out: 4948.875},
            {'in': 5292.885, out: 5294.665},
            {'in': 5381.965, out: 5383.338},
            {'in': 5385.415, out: 5389.58},
            {'in': 5434.93, out: 5436.93},
            {'in': 5437.405, out: 5439.405},
            {'in': 5749.535, out: 5751.915},
            {'in': 5780.235, out: 5782.435},
            {'in': 5881.365, out: 5886.635}
        ],
        timeline = 'png/timeline.16.png',
        url = 'http://next.0xdb.org/' + id + '/96p.webm',
        videoSize = getVideoSize(),
        $videos = [
            Ox.VideoPlayer({
                    controlsBottom: ['play', 'volume', 'scale', 'timeline', 'position'],
                    controlsTop: ['fullscreen', 'title', 'find'],
                    enableFind: true,
                    enableFullscreen: true,
                    enableKeyboard: true,
                    enableVolume: true,
                    focus: 'mouseenter',
                    height: 192,
                    logoLink: 'http://next.0xdb.org/' + id,
                    logoTitle: 'Watch on 0xdb',
                    logo: 'png/logo.png',
                    paused: true,
                    poster: poster,
                    showIconOnLoad: true,
                    showProgress: false,
                    subtitles: 'srt/' + id + '.srt',
                    timeline: function(i) {
                        return 'png/timeline.16.' + i + '.png';
                    },
                    title: 'Brick - Rian Johnson - 2005',
                    video: url + '?' +  + Ox.random(1000000),
                    width: 360
                })
                .css({
                    left: '16px',
                    top: '16px'
                }),
            Ox.VideoPlayer({
                    enableKeyboard: true,
                    height: videoSize.height,
                    'in': 3128.725, 
                    //keepIconVisible: true,
                    out: 3130.725,
                    paused: true,
                    playInToOut: true,
                    //preload: 'none',
                    showIcon: true,
                    timeline: timeline,
                    video: url + '?' +  + Ox.random(1000000),
                    width: videoSize.width
                })
                .css({
                    left: '16px',
                    top: '16px'
                }),
            Ox.VideoPlayer({
                    controlsTop: ['fullscreen', 'title', 'find'],
                    controlsBottom: ['play', 'playInToOut', 'volume', 'size', 'space', 'position'],
                    enableFind: true,
                    enableFullscreen: true,
                    enableVolume: true,
                    externalControls: true,
                    height: 192,
                    'in': 3128.725,
                    largeTimeline: function(i) {
                        return 'http://next.0xdb.org/' + id + '/timelines/timeline.64.' + i + '.png';
                    },
                    out: 3130.725,
                    paused: true,
                    showMilliseconds: 2,
                    subtitles: 'srt/' + id + '.srt',
                    timeline: timeline,
                    title: 'Brick - Rian Johnson - 2005',
                    video: url + '?' +  + Ox.random(1000000),
                    width: 360
                })
                .css({
                    left: '16px',
                    top: '16px'
                })
                .bindEvent({
                    position: function(data) {
                        $blockTimeline.options({
                            position: data.position
                        });
                    }
                })
        ];
    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: $foo = Ox.Element()
                            }
                        ],
                        orientation: 'vertical'
                    })
                    .bindEvent({
                        resize: function(foo, size) {
                            $videos[0].options({width: size - 32});
                            $smallTimeline.options({width: size - 16});
                            $playerTimeline.options({width: size - 16});
                        }
                    }),
                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: 320,
                                resizable: true,
                                resize: [100, 400]
                            },
                            {
                                element: $bar = Ox.Element()
                            }
                        ],
                        orientation: 'vertical'
                    })
                    .bindEvent({
                        resize: function(foo, size) {
                            $videos[2].options({width: size - 32});
                            $blockTimeline.options({width: size - 16});
                        }
                    }),
                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
        });
    }

    Ox.get('srt/0393109.srt', function(srt) {
        var subtitles = Ox.parseSRT(srt);
        $foo.append(
            $smallTimeline = Ox.SmallVideoTimeline({
                duration: 6336.08,
                find: 'brick',
                'in': 3128.725, 
                out: 3130.725,
                results: results,
                subtitles: subtitles,
                timeline: 'png/timeline.16.png',
                type: 'editor',
                width: 376
            })
            .css({
                position: 'absolute',
                left: '4px',
                top: '4px'
            })
        );
        $foo.append(
            $playerTimeline = Ox.SmallVideoTimeline({
                duration: 6336.08,
                find: 'brick',
                'in': 3128.725, 
                out: 3130.725,
                results: results,
                subtitles: subtitles,
                timeline: 'png/timeline.16.png',
                type: 'player',
                width: 376
            })
            .css({
                position: 'absolute',
                left: '4px',
                top: '32px'
            })
        );
        $bar.append(
            $blockTimeline = Ox.BlockVideoTimeline({
                duration: 6336.08,
                find: 'brick',
                'in': 3128.725, 
                out: 3130.725,
                results: results,
                showMilliseconds: 2,
                subtitles: subtitles,
                timeline: function(i) {
                    return 'png/timeline.16.' + i + '.png';
                },
                width: 376
            })
            .css({
                position: 'absolute',
                left: '4px',
                top: '4px'
            })
            .bindEvent('position', function(data) {
                $videos[2].options({
                    position: data.position
                });
            })
        );
    })


});