关于javascript：YouTube iFrame API“ setPlaybackQuality”或“ suggestedQuality”不起作用

YouTube iFrame API “setPlaybackQuality” or “suggestedQuality” not working

我在通过Youtube iFrame API设置视频质量设置时遇到了一些麻烦。这是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

有趣的是，我对player.setPlaybackQuality或event.target.setPlaybackQuality的调用没有给出任何错误。看起来好像玩家忽略了它。调用player.setSuggestedQuality(一个不存在的函数)的调用将引发预期的错误。

我已经尝试了API参考中概述的所有有效字符串参数("中"，"大"，" hd720"等)。他们都不工作。

有人对我应该如何设置此属性有任何建议？

相关讨论

我有完全相同的问题和解决方法。
我认为发生的事情是YouTube仅允许根据显示的实际大小来确定质量水平，因此，除非您的视频高720像素，否则在播放之前不能默认为720p。然后，用户控制该按钮，YouTube不再是鸡巴。

编辑

刚刚取得突破：
如果您使用事件3(缓冲)而不是事件5(播放)，则不会给用户造成停顿。质量开始加载后即会更改。唯一奇怪的是，您还需要在onPlayerReady中设置它，否则它将不起作用。

1
2
3
4
5
6
7
8

function onPlayerReady(event) {
event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.setPlaybackQuality('hd720');
}
}

相关讨论

找到了可能的破解/解决方案。

如果我等到视频开始播放，则应用setPlaybackQuality-它可以工作。因此：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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!
}
}

但是，该解决方案并不理想，因为视频首先开始以较低的质量缓冲-然后在开始播放后切换到720。任何意见或替代解决方案将不胜感激。

相关讨论

问题是YouTube选择了最合适的播放质量，因此它会覆盖onPlayerReady()功能中的setPlaybackQuality()。

我找到了一种解决方案，无论播放器的宽度和高度如何，都可以迫使YouTube的播放器以您想要的任何质量播放：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

该代码确保了建议的质量更改。

请记住：用户无法使用带有该代码的播放器按钮来更改视频质量。

无论如何，您可以只强制一次建议的质量。

在GChrome，Firefox和Safari中进行了测试。

相关讨论

我找到了一个最适合我的解决方案：

1
2
3
4
5
6
7
8
9

function onPlayerStateChange(event) {
//Some code...

$(".btn-change-quality").on("click", function(){
pauseVideo();
player.setPlaybackQuality('hd720');
playVideo();
});
}

相关讨论

另一种解决方案是停止视频并使用seekTo()。对于实时流媒体，您可以跳过seekTo()。不好的地方会显示缓冲，但好的一点是，无论播放器大小如何，您都可以完全控制。

1
2
3
4
5
6
7

var player = YT.get('videoid');
rate = 'small';
var currentTime = player.getCurrentTime();
player.stopVideo();
player.setPlaybackQuality(rate);
player.playVideo();
player.seekTo(currentTime, false);

相关讨论

我已经使用了此功能，并且onPlayerReady中的setPlaybackQuality起作用了。
唯一的问题是分配不是立即进行的，实际上getPlaybackQuality在视频开始播放后就返回了正确的值。实际上，在视频开始之前getPlaybackQuality将始终返回small。但是视频开始播放的时间是使用了正确的playBackQuality。

我也尝试过使用不同的播放器大小组合，甚至可以使用。

注意：
我正在使用IFrame API。

相关讨论