移动设备上忽略了Youtube iFrame API setPlaybackQuality [英] Youtube iFrame API setPlaybackQuality ignored on mobile device

问题描述

我正在尝试设置YouTube iframe API以播放质量较低的全高清视频。我的目标是节省移动设备的带宽并减少加载时间。我的HTML结构是经典的播放器div，加上消息的调试div。

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>

我试图调用 setPlaybackQuality as玩家准备就绪之后，以避免移动用户在缓冲中浪费时间（正如帖子）。我也在BUFFERING和PLAYING状态中调用它。当质量发生变化时，调试内容会根据实际播放质量进行更新。

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");
    }
}

代码似乎在桌面上工作（调试正确设置为小），但在移动设备上被忽略（调试设置为大，使用Android 4.2.2测试）。有解决方案吗？

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?

推荐答案

我找到的解决方法是创建没有 videoId的播放器，从不在其他任何地方调用 setPlaybackQuality ，但调用 loadVideoById（videoId，0，desiredQuality）在 onReady 处理程序中。在测试时，这在Android和iOS上都受到尊重，在Android和桌面上使用正确的质量调用 onPlaybackQualityChanged ，在iOS上调用两次，从不将质量更改为更高或更低的质量。

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.

不幸的是，如果您传递视频中没有的任何质量，它将强制中等。请注意这一点。此外，这不太可能打破API在iOS上所做的任何质量限制，以防止在3G / 4G / LTE网络上使用无关的数据。

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.

这篇关于移动设备上忽略了Youtube iFrame API setPlaybackQuality的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！