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

问题描述

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

HTML

<div id="debug"></div><div id="your_video_id"><div id="玩家"></div>

我尝试在播放器准备好后立即调用 setPlaybackQuality，以避免移动用户在缓冲中浪费时间(如本 发布).我还在缓冲"和播放"状态中调用了它.当质量发生变化时，调试内容会根据实际播放质量进行更新.

JAVASCRIPT

/* 触发播放器准备就绪 */函数 onPlayerReady(event){player.setPlaybackQuality("小");}/* 检测播放质量变化 */功能 onQualityChange(事件){document.getElementById("debug").innerHTML = event.data;}/* 触发玩家事件 */函数 onPlayerStateChange(event){if (event.data == YT.PlayerState.BUFFERING){player.setPlaybackQuality("小");}if (event.data == YT.PlayerState.PLAYING){player.setPlaybackQuality("小");}}

代码似乎可以在桌面上运行(调试正确设置为小")，但在移动设备上被忽略(调试设置为大"，用 Android 4.2.2 测试).有解决办法吗?

解决方案

我发现的解决方法是创建没有 videoId 的播放器，不要在其他任何地方调用 setPlaybackQuality，但是在您的 onReady 处理程序中调用 loadVideoById(videoId, 0, desiredQuality).测试时，这在 Android 和 iOS 上都得到尊重，在 Android 和桌面上以正确的质量调用 onPlaybackQualityChanged 一次，在 iOS 上调用两次，永远不会将质量更改为更高或更低.

不幸的是，如果您通过了视频中没有的任何质量，它将强制使用中等".请注意这一点.此外，这不太可能打破 API 在 iOS 上设置的任何质量上限，以防止在 3G/4G/LTE 网络上使用额外的数据.

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?

解决方案

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.

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