oxjs/demos/videotimelineplayer/js/demo.js

Ox.load('UI', function() {

    Ox.Theme('modern');

    var $innerPanel = Ox.SplitPanel({
            elements: [
                {
                    element: Ox.Element(),
                    resizable: true,
                    resize: [64, 128, 192],
                    size: 64
                },
                {
                    element: Ox.Element()
                }
            ],
            orientation: 'vertical'
        }),
        $outerPanel = Ox.SplitPanel({
            elements: [
                {
                    element: Ox.Element(),
                    resizable: true,
                    resize: [128, 256, 384],
                    size: 128
                },
                {
                    element: $innerPanel
                }
            ],
            orientation: 'horizontal'
        }).appendTo(Ox.$body);

    Ox.get('srt/0097514.srt', function(srt) {

        var id = '0097514',
        // var id = '0318034',

            $videoTimelinePlayer = Ox.VideoTimelinePlayer({
                duration: 3029.96,
                //duration: 5956.24,
                getFrameURL: function(position) {
                    return 'http://0xdb.org/' + id + '/64p' + position + '.jpg'
                },
                getImageURL: function(i) {
                    return 'http://0xdb.org/' + id + '/timeline64p' + i + '.png'
                    //return 'png/timelinecenter64p' + i + '.png'
                },
                height: window.innerHeight - 65,
                paused: true,
                position: 1000,
                subtitles: Ox.parseSRT(srt),
                timelineURL: 'http://0xdb.org/' + id + '/timeline16p.png',
                videoRatio: 1.291667,
                //videoRatio: 1.833333,
                videoURL: 'http://0xdb.org/' + id + '/96p.webm',
                width: window.innerWidth - 129
            })
            .bindEvent({
                resizeend: function(data) {
                    Ox.print('RESIZE', data.size)
                    $videoTimelinePlayer.options({
                        height: data.size
                    });
                }
            });

        $innerPanel
            .replaceElement(1, $videoTimelinePlayer)
            .bindEvent({
                resize: function(data) {
                    Ox.print('RESIZE', data.size)
                    $videoTimelinePlayer.options({
                        width: data.size
                    });
                }
            });

        $videoTimelinePlayer.gainFocus();

    });

});