javascript - 如何设置youtube api的播放质量

Question

我的网站上有 2 位 YouTube 播放器。一切正常，但我无法设置播放质量。我究竟做错了什么？

var playerInfoList = [{
  id: 'player',
  height: '390',
  width: '640',
  videoId: 'jU1_0T79Lew',
  playerVars: {
    'autoplay': 1,
    'autohide': 1,
    'showinfo': 0,
  },
  events: {
    'onReady': onPlayerReady
  }
}, {
  id: 'player1',
  height: '390',
  width: '640',
  videoId: 'u-OxxLMvOXg',
  playerVars: {
    'autoplay': 0,
    'autohide': 1,
    'showinfo': 0,
  }
}];

function onYouTubeIframeAPIReady() {
  if (typeof playerInfoList === 'undefined')
  return;

  for (var i = 0; i < playerInfoList.length; i++) {
    var curplayer = createPlayer(playerInfoList[i]);
  }
}

function createPlayer(playerInfo) {
  return new YT.Player(playerInfo.id, {
    height: playerInfo.height,
    width: playerInfo.width,
    videoId: playerInfo.videoId,
    playerVars: playerInfo.playerVars,
    events: playerInfo.events
  });
}


// The API will call this function when the video player is ready.
function onPlayerReady(event) {
  playerInfo.id.setPlaybackQuality('hd1080'); // Here we set the quality (yay!)
}

Answer 1

Playback quality

player.getPlaybackQuality():String

• This function retrieves the actual video quality of the current video. Possible return values are highres, hd1080, hd720, large, medium and small. It will also return undefined if there is no current video.

player.setPlaybackQuality(suggestedQuality:String):Void

• This function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function.

When you suggest a playback quality for a video, the suggested quality will only be in effect for that video. You should select a playback quality that corresponds to the size of your video player. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video. We recommend calling the getAvailableQualityLevels() function to determine which quality levels are available for a video

注意

If you call the setPlaybackQuality function with a suggestedQuality level that is not available for the video, then the quality will be set to the next lowest level that is available. For example, if you request a quality level of large, and that is unavailable, then the playback quality will be set to medium (as long as that quality level is available).

基于本教程:How to Control YouTube's Video Player with JavaScript

var player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('video-placeholder', {
width: 600,
height: 400,
videoId: 'Xa0Q0J5tOP0',
playerVars: {
color: 'white',
playlist: 'taJ60kskkns,FG0fTKAqZ5g'
},
events: {
onReady: initialize
}
});
}

更改视频质量

$('#quality').on('change', function () {
player.setPlaybackQuality($(this).val());
});

尝试将您的 playerInfo 设置为全局变量，并按照上面的教程来帮助您设置嵌入式 YouTube 视频。

希望这有帮助。