以较低质量加载 Youtube iFrame API 视频
Loading Youtube iFrame API video at a lower quality
目前,我们有一个 YouTube iFrame API 设置,其中包含以下(漂亮的样板)代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
YT.ready(function() {
player = new YT.Player('player', {
videoId: 'iyBaInK2TsI',
width: 200,
height: 200,
events: {
onReady: "onReady",
onStateChange: "onStateChange",
onPlaybackQualityChange: "onPlaybackQualityChange",
onError: "onPlayerError"
},
playerVars: {
fs: 0, // hide fullscreen button by default
playsinline: 1, // make the player not go fullscreen when playing on ios
modestbranding: 1, // hide youtube logo by default - we say 'powered by youtube'
controls: 0, // hide controls by default
showinfo: 0, // hide video title by default
iv_load_policy: 3, // hide annotations by default
rel: 0
}
});
console.log('available quality levels after create = ' + player.getAvailableQualityLevels());
});
// onReady, onStateChange, onPlaybackQualityChange, onPlayerError handlers...
</script>
总而言之,它始终以 'medium' 质量加载视频。调用 setPlaybackQuality('small')
不会影响视频质量,无论我是在桌面还是移动设备上。
我试过在 onReady 和 onStateChange 中调用 setPlaybackQuality('small')
,当状态变为 BUFFERING 或 PLAYING 时,并且在 JavaScript 视频播放、未播放或暂停时完全独立地在控制台中调用。
当用户试图在 3G/4G 连接上加载播放器时,这会出现一个大问题。我知道 3G 正在逐步淘汰视频流,但仍有大量用户在 3G 连接上运行,并且能够以 144p 流式传输实际上使视频在 3G 上可用,而在 240p 下使视频在 4G(非 LTE)上可用。
当我选择 hd720 的视频作为质量选项时,我可以调用 setPlaybackQuality('hd720') 并且效果很好。
我的具体问题是,我的配置中是否有任何东西会阻止切换到较低质量,并且是否有一组特定的命令可以解决此限制并触发播放质量真的变了吗?
我发现的解决方法是创建没有 videoId
的播放器,永远不要在其他任何地方调用 setPlaybackQuality
,而是在 onReady
处理程序中调用 loadVideoById(videoId, 0, 'small')
。这在 Android 和 iOS 上都得到了测试,在 Android 和桌面上用 'small'
调用 onPlaybackQualityChanged
一次,在 iOS 上调用两次,从来没有强制中等质量。
不幸的是,如果你通过 'tiny'
,它似乎不起作用。在大多数视频中,它会强制 'small'
;然而,根据我的经验,它以前是强制 'medium'
的。请注意这一点。
目前,我们有一个 YouTube iFrame API 设置,其中包含以下(漂亮的样板)代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
YT.ready(function() {
player = new YT.Player('player', {
videoId: 'iyBaInK2TsI',
width: 200,
height: 200,
events: {
onReady: "onReady",
onStateChange: "onStateChange",
onPlaybackQualityChange: "onPlaybackQualityChange",
onError: "onPlayerError"
},
playerVars: {
fs: 0, // hide fullscreen button by default
playsinline: 1, // make the player not go fullscreen when playing on ios
modestbranding: 1, // hide youtube logo by default - we say 'powered by youtube'
controls: 0, // hide controls by default
showinfo: 0, // hide video title by default
iv_load_policy: 3, // hide annotations by default
rel: 0
}
});
console.log('available quality levels after create = ' + player.getAvailableQualityLevels());
});
// onReady, onStateChange, onPlaybackQualityChange, onPlayerError handlers...
</script>
总而言之,它始终以 'medium' 质量加载视频。调用 setPlaybackQuality('small')
不会影响视频质量,无论我是在桌面还是移动设备上。
我试过在 onReady 和 onStateChange 中调用 setPlaybackQuality('small')
,当状态变为 BUFFERING 或 PLAYING 时,并且在 JavaScript 视频播放、未播放或暂停时完全独立地在控制台中调用。
当用户试图在 3G/4G 连接上加载播放器时,这会出现一个大问题。我知道 3G 正在逐步淘汰视频流,但仍有大量用户在 3G 连接上运行,并且能够以 144p 流式传输实际上使视频在 3G 上可用,而在 240p 下使视频在 4G(非 LTE)上可用。
当我选择 hd720 的视频作为质量选项时,我可以调用 setPlaybackQuality('hd720') 并且效果很好。
我的具体问题是,我的配置中是否有任何东西会阻止切换到较低质量,并且是否有一组特定的命令可以解决此限制并触发播放质量真的变了吗?
我发现的解决方法是创建没有 videoId
的播放器,永远不要在其他任何地方调用 setPlaybackQuality
,而是在 onReady
处理程序中调用 loadVideoById(videoId, 0, 'small')
。这在 Android 和 iOS 上都得到了测试,在 Android 和桌面上用 'small'
调用 onPlaybackQualityChanged
一次,在 iOS 上调用两次,从来没有强制中等质量。
不幸的是,如果你通过 'tiny'
,它似乎不起作用。在大多数视频中,它会强制 'small'
;然而,根据我的经验,它以前是强制 'medium'
的。请注意这一点。