web-dev-qa-db-fra.com

L'API iFrame de YouTube "setPlaybackQuality" ou "suggestQuality" ne fonctionne pas

Je ne parviens pas à définir les paramètres de qualité d'une vidéo via l'API Youtube iFrame. Ceci est mon code:

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();
}

La chose amusante est que mon appel à player.setPlaybackQuality ou event.target.setPlaybackQuality ne génère aucune erreur. Il semble juste que le joueur l'ignore. Un appel à, par exemple, player.setSuggestedQuality (une fonction qui n'existe pas) renvoie une erreur comme prévu.

J'ai essayé tous les paramètres de chaîne valides comme comme indiqué dans la référence de l'API ('moyen', 'grand', 'hd720' etc.). Aucun d'entre eux ne fonctionne.

Quelqu'un a des suggestions sur la façon dont je suis supposé définir cette propriété? 

javascriptapiiframeyoutube
21
o01

J'ai exactement le même problème et solution de contournement. Je pense que ce qui se passe, c’est que YouTube ne permet que des niveaux de qualité basés sur la taille réelle de l’affichage. Par conséquent, à moins que votre vidéo mesure 720px, vous ne pouvez pas régler par défaut sur 720p avant de le visionner. Ensuite, les commandes de l'utilisateur entrent en jeu et YouTube cesse d'être une bite.


MODIFIER

Il suffit de frapper une percée: Si vous utilisez l'événement 3 (mise en mémoire tampon) au lieu de l'événement 5 (lecture), il n'y a pas de bégaiement pour l'utilisateur. La qualité est modifiée dès le début du chargement. La seule chose étrange est que vous devez également le configurer dans onPlayerReady, sinon cela ne fonctionnera pas.

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

Trouvé un hack/solution possible.

Si j'attends que la lecture de la vidéo commence, appliquez setPlaybackQuality - cela fonctionne. Ainsi:

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

Cependant, la solution n'est pas idéale car la vidéo commence d'abord à mettre en mémoire tampon une qualité inférieure, puis passe en 720 une fois la lecture entamée. Tous les commentaires ou solutions alternatives seront appréciés.

5
o01

Le problème est que YouTube sélectionne la qualité de lecture la plus appropriée. Il remplace donc setPlaybackQuality() dans la fonction onPlayerReady().

J'ai trouvé une solution pour forcer le lecteur YouTube à jouer avec la qualité que vous désirez, quelles que soient sa largeur et sa hauteur:

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

Le code garantit que le changement de qualité est suggéré. 

Gardez à l'esprit: l'utilisateur ne pouvait pas changer la qualité vidéo avec le bouton du lecteur avec ce code.

Quoi qu'il en soit, vous pouvez forcer la qualité suggérée une seule fois.

Testé dans GChrome, Firefox et Safari.

3
jonalvarezz

j'ai trouvé une solution qui fonctionne parfaitement pour moi: 

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

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

J'ai joué un peu avec cette fonction et setPlaybackQuality dans les œuvres onPlayerReady. Le seul problème est que l'attribution n'est pas immédiate, en fait getPlaybackQuality renvoie la valeur correcte juste après le démarrage de la vidéo. En fait, avant le début de la vidéo, getPlaybackQuality retournera toujours small. Mais une fois que la vidéo commence utilise le bon playBackQuality .

J'ai également essayé différentes combinaisons de taille de lecteur et cela fonctionne même.

note: J'utilise IFrame API .

0
sirLisko

une autre solution, arrêtez la vidéo et utilisez seekTo(). pour la diffusion en direct, vous pouvez ignorer seekTo(). Le mauvais, cela montrera la mise en mémoire tampon, mais le bon est que vous avez le contrôle total, peu importe la taille du joueur.

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