Javascript YouTube iFrame API“setPlaybackQuality”或“suggestedQuality”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8802498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube iFrame API "setPlaybackQuality" or "suggestedQuality" not working
提问by o01
I'm having some trouble setting the quality settings on a video via the Youtube iFrame API. This is my code:
我在通过 Youtube iFrame API 设置视频的质量设置时遇到了一些问题。这是我的代码：
var player;
player = new YT.Player('player', {
height: '490',
width: '725',
videoId: yturl,
/* setPlaybackQuality: 'hd720', <-- DOES NOT WORK */
/* suggestedQuality: 'hd720', <-- DOES NOT WORK */
events: {
'onReady': onPlayerReady
}
});
function onPlayerReady(event) {
player.setPlaybackQuality('hd720'); // <-- DOES NOT WORK
event.target.setPlaybackQuality('hd720'); // <-- DOES NOT WORK
player.setVolume(100); // <-- DOES WORK
console.log(player.getPlaybackQuality()); // <-- Prints 'small' to console
event.target.playVideo();
}
The funny thing is that my call to player.setPlaybackQualityor event.target.setPlaybackQualitydoesn't give any errors. It just looks as if the player ignores it. A call to, say, player.setSuggestedQuality(a function that doesn't exist) throws an error as expected.
有趣的是，我调用player.setPlaybackQualityorevent.target.setPlaybackQuality没有给出任何错误。看起来好像玩家忽略了它。例如，调用player.setSuggestedQuality（一个不存在的函数）会按预期抛出错误。
I've tried all the valid string parameters as outlined in the API reference('medium', 'large', 'hd720' etc). None of them work.
我已经尝试了 API 参考中概述的所有有效字符串参数（“中”、“大”、“hd720”等）。他们都没有工作。
Anyone have any suggestions to how I'm supposed to set this property?
有人对我应该如何设置此属性有任何建议吗？
回答by Jedka
I have the exact same problem and workaround.
I think what's happening is that YouTube is only allowing quality levels based on the actual size of the display, so unless you have your video 720px tall you can't default to 720p before it's actually playing. Then the user controls kick in and YouTube stops being a dick.
EDIT
我有完全相同的问题和解决方法。我认为正在发生的事情是 YouTube 只允许基于显示器的实际大小的质量级别，所以除非你的视频高 720 像素，否则你不能在实际播放之前默认为 720p。然后用户控制开始，YouTube 不再是一个混蛋。
编辑
Just hit a breakthrough: If you use event 3 (buffering) instead of event 5 (playing) there's no stutter for the user. Quality is changed as soon as it starts loading. Only weird thing is you need to set it in onPlayerReady as well or it doesn't work.
刚刚取得突破：如果您使用事件 3（缓冲）而不是事件 5（播放），则用户不会出现卡顿现象。一旦开始加载，质量就会改变。唯一奇怪的是你还需要在 onPlayerReady 中设置它，否则它不起作用。
function onPlayerReady(event) {
event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd720');
}
}
回答by o01
Found a possible hack/solution.
找到了一个可能的黑客/解决方案。
If I wait until the video has started playing, then apply setPlaybackQuality- it works. Thusly:
如果我等到视频开始播放，然后应用setPlaybackQuality- 它有效。因此：
player = new YT.Player('player', {
height: '490',
width: '725',
videoId: yturl,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
function onPlayerReady(event) {
player.setVolume(100);
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
event.target.setPlaybackQuality('hd720'); // <-- WORKS!
}
}
However, the solution isn't ideal as the video first starts to buffer on a lower quality - then switch to 720 once it starts playing. Any comments or alternative solutions will be appreciated.
但是，该解决方案并不理想，因为视频首先开始以较低的质量缓冲 - 一旦开始播放就切换到 720。任何评论或替代解决方案将不胜感激。
回答by jonalvarezz
Problem is YouTube selects the most appropriate playback quality, so it overrides setPlaybackQuality()in the onPlayerReady()function.
问题是 YouTube 选择了最合适的播放质量，因此它会覆盖setPlaybackQuality()该onPlayerReady()功能。
I've found a solution to force YouTube's player to play in any quality you desire no matter the width and height of the player:
我找到了一种解决方案，可以强制 YouTube 播放器以您想要的任何质量播放，而不管播放器的宽度和高度如何：
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '180',
width: '320',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerPlaybackQualityChange(event) {
var playbackQuality = event.target.getPlaybackQuality();
var suggestedQuality = 'hd720';
console.log("Quality changed to: " + playbackQuality );
if( playbackQuality !== 'hd720') {
console.log("Setting quality to " + suggestedQuality );
event.target.setPlaybackQuality( suggestedQuality );
}
}
The code ensures the quality change is the suggested.
该代码确保质量更改是建议的。
Keep in mind: the user couldn't change the video quality with the player button with that code.
请记住：用户无法使用带有该代码的播放器按钮更改视频质量。
Anyway, you could force the suggested quality just once.
无论如何，您可以只强制建议质量一次。
Tested in GChrome, Firefox, and Safari.
在 GChrome、Firefox 和 Safari 中测试。
回答by user3164028
i found a solution that works perfectly for me:
我找到了一个非常适合我的解决方案：
function onPlayerStateChange(event) {
//Some code...
$(".btn-change-quality").on("click", function(){
pauseVideo();
player.setPlaybackQuality('hd720');
playVideo();
});
}
回答by uingtea
another solution, stop video and use seekTo(). for live streaming you can skip seekTo(). The bad it will show buffering but the good is you have full control no matter what the player size.
另一种解决方案，停止视频并使用seekTo(). 对于直播，您可以跳过seekTo()。它会显示缓冲的坏处，但好处是无论播放器大小如何，您都可以完全控制。
var player = YT.get('videoid');
rate = 'small';
var currentTime = player.getCurrentTime();
player.stopVideo();
player.setPlaybackQuality(rate);
player.playVideo();
player.seekTo(currentTime, false);
回答by sirLisko
I've played a little bit with this function and setPlaybackQualityin the onPlayerReadyworks.
The only problem is that the assignment is not immediate, in fact getPlaybackQualityis returning the correct value just after the video is started. Actually before the video is started getPlaybackQualitywill return always small. But one time the video starts is using the correct playBackQuality.
我在这个功能和工作setPlaybackQuality中玩了一点onPlayerReady。唯一的问题是分配不是立即的，实际上getPlaybackQuality是在视频开始后立即返回正确的值。实际上在视频开始之前getPlaybackQuality总是会返回small。但是有一次视频开始时使用了正确的playBackQuality。
I've also tried with different player size combinations and it even works.
我也尝试过不同的播放器尺寸组合，它甚至可以工作。
note: I'm using IFrame API.
注意：我正在使用IFrame API。
