admin管理员组

文章数量:1315359

I have 2 youtube players on my site. Everything works fine but I cannot set playback quality. What am I doing wrong?

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

I have 2 youtube players on my site. Everything works fine but I cannot set playback quality. What am I doing wrong?

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

• javascript
• youtube-api

Share Improve this question Follow edited Jun 15, 2016 at 21:46 m0meni 16.5k1818 gold badges8787 silver badges148148 bronze badges asked Jun 15, 2016 at 21:37 mrgreenmrgreen 3511 gold badge22 silver badges99 bronze badges 3

• did you try getting the available quality levels using player.getAvailableQualityLevels() before setting the video quality ? – SenthilKumarM Commented Jun 15, 2016 at 21:52
• Is this line playerInfo.id.setPlaybackQuality('hd1080'); should be event.target.setPlaybackQuality('hd1080'); ? – Haizhou Liu Commented Jun 15, 2016 at 21:56
• Thanks, working like this. – mrgreen Commented Jun 20, 2016 at 12:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 remend calling the getAvailableQualityLevels() function to determine which quality levels are available for a video

NOTE

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).

Base on this tutorial : 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
}
});
}

Changing Video Quality

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

Try setting your playerInfo to a global variable and follow the tutorial above to help you set up a embedded youtube video.

Hope this helps.

Update for 2022:

It looks like in 2019 Google removed the ability to set video quality.

本文标签： javascriptHow to set playback quality youtube apiStack Overflow