Set jw player youtube video playback quality

Question

I'm using jw player to play youtube videos, but i need for the video to start playing in hd ( 720p ) i use the following code:

<div id="player">
<script>
 jwplayer("player").setup({
        file: "http://www.youtube.com/watch?v=o8UCI7r1Aqw",
        height: "720",
        width: "1280"
    });
</script>
</div>
<script>
jwplayer('player').onPlay(function() {
jwplayer().setPlaybackQuality('hd720');
});
</script>

but i get the following error

There was an error calling back an event handler

Here is the test player that i set up.

Answer 1

setPlaybackQuality is not a valid API call - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference

Here is a list of valid quality API calls:

Quality

These API calls are used to listen to or update the video quality if multiple quality levels of a video are provided.

getQualityLevels()
    Returns an array with quality levels from the player. Each level is an object that contains a label property. 
getCurrentQuality()
    Returns the index of the currently active quality level. 

setCurrentQuality(index)
    Change the quality level to the provided index. The index must be within the list provided by getQualityLevels. 

onQualityLevels(callback)
    Fired when the list of available quality levels is updated. Happens e.g. shortly after a playlist item starts playing. Event attributes:

        levels (Array): the full array with new quality levels. 

onQualityChange (callback)
    Fired when the active quality level is changed. Happens in respons to e.g. a user clicking the controlbar quality menu or a script calling setCurrentQuality. Event attributes:

        currentQuality (Number): index of the new quality level in the getQualityLevels() array. 

Answer 2

The solution for me was native youtube API. (from https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality )

See Demo!
(But it has one bug: you can switch to Upper Quality, but then it doesnt go to lower quality...)

<div id="MyPlayerDivIDD1"></div>    <div id="MyQualities"></div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
function onYouTubePlayerAPIReady() {
    ytp1 = new YT.Player('MyPlayerDivIDD1', {   height: '200',  width: '290', videoId: 'Rk6_hdRtJOE',           playerVars: { 'autoplay': 1, 'controls': 1 , 'autohide':0,},                    events: {'onReady': onPlayerReady,  'onStateChange': onPlayerStateChange }                         });
    var startedd=false; var MyQuality; 
}  
function onPlayerReady(event) {}
function onPlayerStateChange(event) {   if (event.data == YT.PlayerState.PLAYING && !startedd) { SetQuallll(event);startedd=true; }  }
function SetQuallll(event) {    MyQuality = MyQuality || 'tiny';    event.target.setPlaybackQuality(MyQuality);  }  
</script>



<br/> <a href="javascript:ShowMenu();">SHOW QUALITY Switcher </a>
<script>
function ShowMenu(){
    AllQualities = ytp1.getAvailableQualityLevels(); AllQualities.push("hd720"); AllQualities.push("hd1080");
    for (var i=1; i<AllQualities.length; i++) {  document.getElementById("MyQualities").innerHTML += ' <a href="javascript:  startedd=false;  MyQuality=\''+AllQualities[i]+'\'; alert(\'Current Qualityy:\'+ytp1.getPlaybackQuality() + \' ---------  Switching To:'+AllQualities[i]+'\');  ytp1.pauseVideo(); ytp1.setPlaybackQuality(\''+AllQualities[i]+'\');  ytp1.playVideo();  void(0); ">'+i + ')' + AllQualities[i]+'</a>  '; }
}</script>