I'm trying to setup YouTube iframe API to play a FullHD video with a lower quality. My goal is to save bandwidth on mobile devices and reduce loading time. My HTML structure is the classical player div, plus a debug div for messages.
HTML
<div id="debug"></div>
<div id="your_video_id">
<div id="player"></div>
</div>
I've tried to invoke setPlaybackQuality as soon as the player is ready, to avoid mobile users wasting time in buffering (as suggested in this post). I've also invoked it in both "BUFFERING" and "PLAYING" states. When quality changes, debug content is updated with actual playback quality.
JAVASCRIPT
/* Trigger player ready */
function onPlayerReady(event)
{
player.setPlaybackQuality("small");
}
/* Detect playback quality changes */
function onQualityChange(event)
{
document.getElementById("debug").innerHTML = event.data;
}
/* Trigger player events */
function onPlayerStateChange(event)
{
if (event.data == YT.PlayerState.BUFFERING)
{
player.setPlaybackQuality("small");
}
if (event.data == YT.PlayerState.PLAYING)
{
player.setPlaybackQuality("small");
}
}
The code seems to work on desktop (debug is correctly set to "small"), but it's ignored on mobile (debug set to "large", tested with Android 4.2.2). Is there a solution for this?