API iFrame YouTube "setPlaybackQuality" или "предлагаемое качество" не работает

Question

У меня возникли проблемы с настройкой параметров качества видео через API YouTube 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 ("средний", "большой", "hd720" и т. Д.). Никто из них не работает.

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

Answer 1

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


РЕДАКТИРОВАТЬ

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

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

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

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

Answer 4

Я нашел решение, которое идеально подходит для меня:

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

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

Answer 5

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

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

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

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