Demo: Cuepoints

Media Synced Events

This is a tiny and somewhat unmotivated cue-point-demo showing the basic idea behind media synched events.

While this demo just features some boring blabla please note that you can trigger any Javascript function you want to. Having this said your possibilities are legion. You might trigger an iframe showing related Wikipedia pages or a Google Maps widget. It is also possible to manipulate the player itself - by itself so to say. More information regarding this cue point stuff can be found in the docs.

The Code

<div id="player_a" class="projekktor" style="width: 100%;"></div>

<div id="stuff" style="border: 5px dashed #333; width: 600px; height: 185px; line-height: 30px;font-size: 30px; padding: 15px; margin: 15px auto;">
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {

    projekktor('#player_a', {
    title: "Cuepoint Demo",
    debug: false,
    poster: 'http://www.projekktor.com/wp-content/manual/intro.png',
	playerFlashMP4: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',
	playerFlashMP3: 'http://www.projekktor.com/wp-content/manual/jarisplayer.swf',	
    ratio: 16/9,
    plugin_controlbar: {
        showCuePoints: true
    },    
    controls: true,
    playlist: [
        {
            0: {src:'http://www.projekktor.com/wp-content/manual/ubere.mp4', type:'video/mp4'},
            cuepoints: [
                            {
                          on: '00:02',
                             value: 'UBERELECTRON, baby!',
                                callback: addUselessText
                            },
                            {
                          on: '00:08',
                             value: 'HELLO WORLD',
                                callback: addUselessText
                            },
                            {
                          on: '00:10',
                             value: 'a never ending story',
                                callback: addUselessText
                            },
                            {
                          on: '00:15',
                             value: 'wish to have some spare for it',
                                callback: addUselessText
                            },
                            {
                          on: '00:17',
                             value: 'Shouldn&acute;t this be some twitter stuff?',
                                callback: addUselessText
                            },
                            {
                          on: '00:19',
                             value: 'Or a Google Maps widget?',
                                callback: addUselessText
                            },
                            {
                          on: '00:21',
                             value: '... who cares.',
                                callback: addUselessText
                            },
                            {
                          on: '00:26',
                             value: 'wecametostay blabla... pft.',
                                callback: addUselessText
                            },
                            {
                          on: '00:31',
                             value: 'WAIT!!! PAUSE IT!!! NAO!!1',
                                callback: addUselessText
                            },    
                            {
                          on: '00:32',
                             value: 'just an IQ test.',
                                callback: addUselessText
                            },
                           {
                          on: '00:34',
                             value: 'Cubes and bars... WTF?',
                                callback: addUselessText
                            },
                            {
                          on: '00:37',
                             value: 'we turn to red.',
                                callback: function(on, txt, nat, player) {addUselessText(on, txt, nat, player); $('#stuff').css('backgroundColor', 'red');}
                            },
                            {
                          on: '00:40',
                             value: 'and white again.',
                                callback: function(on, txt, nat, player) {addUselessText(on, txt, nat, player); $('#stuff').css('backgroundColor', '#fff');}
                            },
                            {
                          on: '00:43',
                             value: 'player mutes in 4 secs.',
                    callback: addUselessText

                            },
                            {
                          on: '00:44',
                             value: '....3 secs.',
                    callback: addUselessText
                            },
                            {
                          on: '00:45',
                             value: '....2 secs.',
                    callback: addUselessText

                            },
                            {
                          on: '00:46',
                             value: '...in one second.',
                    callback: addUselessText

                            },
                            {
                          on: '00:47',
                             value: '',
                    callback: function(obj) {obj.player.setVolume(0);}
                            },
                            {
                          on: '00:48',
                             value: 'ufff... much better.',
                    callback: addUselessText                            
                },
                            {
                          on: '00:55',
                             value: 'End of test.',
                    callback: function(obj) {addUselessText(obj); obj.player.setVolume(1)}
                  
                }
            ]
        }
    ] 
    });  


    function addUselessText(obj) {

    if (obj.enabled===true)
        $('#stuff').prepend( $('<span/>').html(obj.value+"<br/>").delay(5000).fadeOut('slow') );

    if (obj.enabled===true && obj.value.indexOf('PAUSE')>-1)
        obj.player.setPause();

    }


})
</script>