matijagrcic · June 30, 2014 19:52
diff --git a/iFrameYouTubeApi.html b/iFrameYouTubeApi.html
 <!DOCTYPE html>
 <html>

 <head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
 </head>

 <body>

    <div class="container">
        <div class="row">

            <div class="md-6">
                <div id="player"></div>
            </div>

            <div class="md-6">


                <div class="btn-group">
                    <button type="button" class="btn btn-default" id="pause">Pause</button>
                    <button type="button" class="btn btn-default" id="start">Play</button>
                </div>

                <div class="btn-group">
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="playback-rates" data-toggle="dropdown">
                            Playback rates
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="playback-rates"></ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

       
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>

    <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


        var player;

        //execute as soon as the player API code downloads
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // execute when the onReady event fires
        //starts video
        function onPlayerReady(event) {

            console.log("onPlayerReady");
            console.log(event);

            var duration = event.target.getDuration();

            console.log("Duration:" + duration);

            fillPlaybackRates();
        }

        //  when the onStateChange event fires
        function onPlayerStateChange(event) {

            console.log("onPlayerStateChange")
            console.log(event)

            if (event.data == YT.PlayerState.PLAYING) {
                console.log(YT);
            }
        }


        var pause = $("#pause"),
            start = $("#start"),
            mute =  $("#mute");

        pause.on('click', function () {
            player.pauseVideo();
        });

        start.on('click', function () {
            player.playVideo();
        });       


        var fillPlaybackRates = function () {

            var playbackDropdownMenu = $(".dropdown-menu");
            var playbackRates = player.getAvailablePlaybackRates();

            console.log(playbackRates);

            for (var i = 0; i < playbackRates.length; i++) {

                playbackDropdownMenu.append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + playbackRates[i] + '</a></li>');
            }          
        }

        
        var playbackRatesButton = $("#playback-rates");
        $(document).on('click','.dropdown-menu > li > a', function () {
            
            var option = $(this).text();
            playbackRatesButton.text(option);

            player.setPlaybackRate(option);
        });        


    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title></title>
	<link href="Content/bootstrap.css" rel="stylesheet" />
	</head>

	<body>

	<div class="container">
	<div class="row">

	<div class="md-6">
	<div id="player"></div>
	</div>

	<div class="md-6">


	<div class="btn-group">
	<button type="button" class="btn btn-default" id="pause">Pause</button>
	<button type="button" class="btn btn-default" id="start">Play</button>
	</div>

	<div class="btn-group">
	<div class="dropdown">
	<button class="btn btn-default dropdown-toggle" type="button" id="playback-rates" data-toggle="dropdown">
	Playback rates
	<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="playback-rates"></ul>
	</div>
	</div>
	</div>

	</div>
	</div>


	<script src="Scripts/jquery-2.1.1.js"></script>
	<script src="Scripts/bootstrap.js"></script>

	<script>
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


	var player;

	//execute as soon as the player API code downloads
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '390',
	width: '640',
	videoId: 'M7lc1UVf-VE',
	events: {
	'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange
	}
	});
	}

	// execute when the onReady event fires
	//starts video
	function onPlayerReady(event) {

	console.log("onPlayerReady");
	console.log(event);

	var duration = event.target.getDuration();

	console.log("Duration:" + duration);

	fillPlaybackRates();
	}

	// when the onStateChange event fires
	function onPlayerStateChange(event) {

	console.log("onPlayerStateChange")
	console.log(event)

	if (event.data == YT.PlayerState.PLAYING) {
	console.log(YT);
	}
	}


	var pause = $("#pause"),
	start = $("#start"),
	mute = $("#mute");

	pause.on('click', function () {
	player.pauseVideo();
	});

	start.on('click', function () {
	player.playVideo();
	});


	var fillPlaybackRates = function () {

	var playbackDropdownMenu = $(".dropdown-menu");
	var playbackRates = player.getAvailablePlaybackRates();

	console.log(playbackRates);

	for (var i = 0; i < playbackRates.length; i++) {

	playbackDropdownMenu.append('<li role="presentation"><a role="menuitem" tabindex="-1" href="#">' + playbackRates[i] + '</a></li>');
	}
	}


	var playbackRatesButton = $("#playback-rates");
	$(document).on('click','.dropdown-menu > li > a', function () {

	var option = $(this).text();
	playbackRatesButton.text(option);

	player.setPlaybackRate(option);
	});


	</script>
	</body>

	</html>