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?
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With