可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

First video is loaded in 1080p than when I press a button with class="quality" It should change the quality to 720p but it's not working in HTML5 player.

It works on Flash Player but not in HTML5. I'm using JavaScript Player API.

Note: None of these solutions worked for me. YouTube iFrame API "setPlaybackQuality" or "suggestedQuality" not working

function onPlayerReady(event) {
    event.target.playVideo();
    event.target.setPlaybackQuality('hd1080'); //works
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        $(".quality").click(function() {
            event.target.setPlaybackQuality('hd720'); //doesn't work
        });    
    }
}

The problem is you can not downgrade quality. Once you set to 1080p for ex you can not go back to 720p.

回答1:

I have taken the example from this site YouTube Player API Reference for iframe Embeds. I have manually added one button to change the quality which is working absolutely fine, Here is the working code.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="change_quality">Change Quality</button>
        <div id="player"></div>
        <script>
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
                });
            }
            function onPlayerReady(event) {
                event.target.playVideo();
                event.target.setPlaybackQuality('360p');
            }
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING) {
                    $("#change_quality").click(function() {
                        event.target.setPlaybackQuality('240p');
                    });
                }
            }
        </script>
    </body>
</html>

Initially onPlayerReady the quality is set to 360p. After clicking on Change Quality button the quality is set to 144p.

回答2:

Try stopping the video, then setting the playback quality, then resuming playback.

function onPlayerStateChange(event) {
    $(".quality").click(function() {
        event.target.stopVideo();
        event.target.setPlaybackQuality('hd720');
        event.target.playVideo();
    });    
}