Youtube iFrame API setPlaybackQuality ignored on m

问题:

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?

回答1:

The workaround I found is to create the player with no videoId, never call setPlaybackQuality anywhere else, but call loadVideoById(videoId, 0, desiredQuality) inside of your onReady handler. This was respected on both Android and iOS when tested, calling onPlaybackQualityChanged with the correct quality once on Android and Desktop and twice on iOS, never changing the quality to anything higher or lower.

Unfortunately, if you pass any quality that isn't available on the video, it will force 'medium'. Be aware of that. Also, this is unlikely to break any quality-capping that the API does on iOS to prevent extraneous data usage on 3G/4G/LTE networks.