Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Youtube iFrame API setPlaybackQuality ignored on mobile device

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?

like image 881
Giorgio Avatar asked Dec 19 '14 08:12

Giorgio


People also ask

What can I do with the YouTube iframe API?

Using the Youtube IFrame API’s JavaScript functions you can control video playback (play, pause, or stop videos; adjust the player volume; or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change or a video playback quality change.

How to test if an iframe is responsive?

The Result for Responsive Iframe As you can see on the sample embedded iframe YouTube video below, it is now proportionally responsive. The video and iframe is now synchronize in terms of responsiveness. If you want to test it, resize your browser’s window or use a mobile device.

How does the onyoutubeiframeapiready function work?

The onYouTubeIframeAPIReady function will execute as soon as the player API code downloads. This portion of the code defines a global variable, player, which refers to the video player you are embedding, and the function then constructs the video player object.

What is the difference between onstatechange and onplaybackqualitychange events?

onStateChange: This event fires whenever the player’s state changes. The data property of the event object that the API passes to your event listener function will specify an integer that corresponds to the new player state. onPlaybackQualityChange: This event fires whenever the video playback quality changes.


1 Answers

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.

like image 75
Dennis L Avatar answered Oct 18 '22 03:10

Dennis L