YouTube - PlaybackRate Test

by fredd man

HTML

<div id="debug"></div>
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>

var playbackRates;
var player;
var debug = document.getElementById( 'debug' );

function init() {

    document.addEventListener( 'mousemove', onMouseMove );
}

function onMouseMove( event ) {

    var position = event.y / window.innerHeight;
    var rate = position * 2.0;

    if ( player ) {

        var map = playbackRates.map( function( val ) {
            return {
                delta: Math.abs( rate - val ),
                val: val
            };
        });

        map.sort( function( a, b ) {
            return b.delta - a.delta;
        });

        var closest = map.pop().val;

        player.setPlaybackRate( closest );

        console.log( 'Setting playback rate:', closest );

        debug.innerHTML = 'Playback rate: ' + closest;
    }
}

function onPlayerStateChange( event ) {

    console.log( 'Player state change', event );
}

function onPlayerReady( event ) {

    console.log( 'Player ready', event );
    console.log( 'Available playback rates', player.getAvailablePlaybackRates() );

    playbackRates = player.getAvailablePlaybackRates();
    player.playVideo();
}

function onYouTubeIframeAPIReady() {
    
    console.log( 'YouTube ready' );

    player = new YT.Player( 'player', {
        videoId: 'LSf2hz6cT9s',
        height: 390,
        width: 640,
        events: {
            onStateChange: onPlayerStateChange,
            onReady: onPlayerReady
        }
    });
}

init();

</script>

CSS

html, body {
    overflow: hidden;
    margin: 0;
}