API YouTube iFrame "setPlaybackQuality" или "suggestQuality" не работает

У меня возникли проблемы с настройкой параметров качества на видео через Youtube API iFrame. Это мой код:

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 ('medium', 'large', 'hd720' и т.д.). Ни один из них не работает.

У кого-нибудь есть предложения, как я должен установить это свойство?

Ответ 1

У меня есть одна и та же проблема и обходной путь. Я думаю, что происходит то, что YouTube позволяет только уровни качества, основанные на фактическом размере дисплея, поэтому, если у вас нет видеоролика высотой 720 пикселей, вы не сможете по умолчанию использовать 720p, прежде чем он начнет играть. Затем пользователь контролирует удар, и YouTube перестает быть членом.

EDIT

Просто прорыв: Если вы используете событие 3 (буферизация) вместо события 5 (воспроизведение), для пользователя нет заикания. Качество изменяется, как только он начинает загружаться. Только странно, вам нужно также установить его в onPlayerReady, или он не работает.

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

Ответ 2

Найден возможный взлом/решение.

Если я жду, пока видео начнет воспроизводиться, примените setPlaybackQuality - он работает. Thusly:

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 после его начала воспроизведения. Любые комментарии или альтернативные решения будут оценены.

Ответ 3

Проблема заключается в том, что YouTube выбирает наиболее подходящее качество воспроизведения, поэтому он переопределяет setPlaybackQuality() в функции onPlayerReady().

Я нашел решение заставить игрока 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 );
    }
}

Код гарантирует изменение качества.

Имейте в виду: пользователь не мог изменить качество видео с помощью кнопки игрока с этим кодом.

Во всяком случае, вы могли бы заставить предлагаемое качество только один раз.

Протестировано в GChrome, Firefox и Safari.

Ответ 4

я нашел решение, которое отлично работает для меня:

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

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

Ответ 5

Я немного сыграл с этой функцией и setPlaybackQuality работает в onPlayerReady. Единственная проблема заключается в том, что назначение не является непосредственным, на самом деле getPlaybackQuality возвращает правильное значение сразу после запуска видео. Фактически перед запуском видео getPlaybackQuality всегда будет возвращаться small. Но один раз при запуске видео используется правильный playBackQuality.

Я также пробовал с различными комбинациями размеров игроков, и он даже работает.

Примечание: Я использую IFrame API.

Ответ 6

другое решение, остановите видео и используйте seekTo(). для прямой трансляции вы можете пропустить seekTo(). Плохо он будет показывать буферизацию, но хорошо, что у вас есть полный контроль независимо от размера игрока.

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