web-dev-qa-db-ja.com

YouTube iFrame API「setPlaybackQuality」または「suggestedQuality」が機能しない

Youtube iFrame APIを使用して動画の品質設定を行う際に問題が発生します。これは私のコードです：

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'など）として試しました。それらのどれも動作しません。

誰もがこのプロパティを設定する方法について何か提案がありますか？

javascriptapiiframeyoutube
22
o01

まったく同じ問題と回避策があります。 YouTubeでは、ディスプレイの実際のサイズに基づいた品質レベルしか許可されていないので、実際に再生する前に、720ピクセルのビデオがない限り、デフォルトで720ピクセルにすることはできないと思います。次に、ユーザーコントロールがキックインし、YouTubeがディックでなくなる。


編集

突破口を打つだけです。イベント5（再生）の代わりにイベント3（バッファリング）を使用する場合、ユーザーにとって途切れることはありません。読み込みが始まるとすぐに品質が変更されます。奇妙なことに、それをonPlayerReadyにも設定する必要があるか、または機能しません。

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

可能なハック/解決策を見つけました。

ビデオの再生が始まるまで待つ場合は、setPlaybackQualityを適用します-機能します。したがって：

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に切り替えます。コメントや代替ソリューションがあれば高く評価されます。

4
o01

問題は、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でテスト済み

3
jonalvarezz

私にとって完璧に機能する解決策を見つけました：

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

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

私はこの関数とsetPlaybackQualityの作品でonPlayerReadyを少し遊んだことがあります。唯一の問題は、割り当てがすぐに行われないことです。実際、getPlaybackQualityはビデオの開始直後に正しい値を返します。実際には、ビデオが開始される前にgetPlaybackQualityは常にsmallを返します。しかし、ビデオが開始するときに、正しいplayBackQualityを使用しています。

また、さまざまなプレーヤーサイズの組み合わせを試してみましたが、うまくいきます。

注：私はIFrame APIを使用しています。

0
sirLisko

別の解決策は、ビデオを停止してseekTo()を使用することです。ライブストリーミングの場合、seekTo()をスキップできます。悪いのはバッファリングを示しますが、良いのはプレーヤーのサイズに関係なく完全に制御できることです。

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