Popcorn With JoyStick Controller

by rwaldron

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="300" width="500" id="video" controls> 
<source src="http://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<pre>
(A) to Play
(B) to Pause
(X) Volume Down
(Y) Volume Up
Analog Stick Up to Rewind
Analog Stick Down to Fast Forward
</pre>

<a href="ftp://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/tmielczarek@mozilla.com-8df56f741a66/">Firefox 8 w/ joystick events</a>, <a href="http://tattiebogle.net/index.php/ProjectRoot/Xbox360Controller/OsxDriver">XBOX 360 Controller: OSX Driver</a>

JavaScript

// In collaboration with jason orendorff

var $pop = Popcorn("#video"), 
    Controls = {
        "1": function() {
            this.play();
        }, 
        "2": function() {
            this.pause();
        }, 
        "3": function() {
            var vol = this.volume();
            if ( vol > 0 ) {
                this.volume( vol - 0.05 );
            }
        },
        "4": function() {
            var vol = this.volume();
            if ( vol < 1 ) {
                this.volume( vol + 0.05 );
            }
        }
    }, 
    analog = {
        axis: null, 
        value: null    
    };

$pop.volume( 0.5 );

window.addEventListener( "MozJoyButtonDown", function( event ) {
    //console.log(event.button)
    var action = Controls[ event.button ];
    action && action.call( $pop );
}, false );
    
window.addEventListener( "MozJoyAxisMove", function( event ) {
    if ( event.axis === 1 ) {
        analog.value = event.value;
    }
}, false );

function throttle() {
    
    var value, currentTime;
    
    if ( analog.value != null ) {
        
        value = analog.value.toFixed(2);
        currentTime = $pop.currentTime();
        
        if ( Math.abs(value) > 0.25 ) {
             $pop.currentTime( currentTime + 2 * Math.pow(value, 3) );
        }
        /*
        console.log(
            value, 
            analog.axis
        );
        */
    }
    setTimeout(function() {
        throttle();
    }, 1000/20 );    
}

throttle();