Youtube iFrame API setPlaybackQuality在移动设备上被忽略

前端之家收集整理的这篇文章主要介绍了Youtube iFrame API setPlaybackQuality在移动设备上被忽略前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试设置YouTube iframe API以较低质量播放FullHD视频.我的目标是在移动设备上节省带宽,并减少加载时间.我的 HTML结构是经典的播放器div,加上一个用于消息的调试div.

HTML

<div id="debug"></div>

<div id="your_video_id">
  <div id="player"></div>
</div>

一旦播放器准备就绪,我已经尝试调用setPlaybackQuality,以避免移动用户浪费时间缓冲(如post所示).我也在“BUFFERING”和“PLAYING”状态中调用它.当质量变化时,调试内容将以实际播放质量进行更新.

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进行测试).是否有解决方案?

解决方法

我发现的解决方法是创建没有videoId的播放器,不要在其他地方调用setPlaybackQuality,而是在onReady处理程序中调用loadVideoById(videoId,desiredQuality).这在Android和iOS上都受到尊重,经过测试,在Android和桌面上以正确的品质调用了一次正确的质量,在iOS上调用了两次,从不将质量改变为更高或更低的质量.

不幸的是,如果您传递视频中不可用的任何质量,它将强制“中”.注意到这一点.此外,这不可能破坏API在iOS上的任何质量上限,以防止3G / 4G / LTE网络上的无关数据使用.

猜你在找的HTML相关文章