Question

第一个视频加载在1080p中，而不是按下class="quality"的按钮时，应该将质量更改为720p但it's not working in HTML5 player.

它适用于Flash Player但不适用于HTML5。我正在使用JavaScript Player API。

注意：这些解决方案都不适用于我。 YouTube iFrame API“setPlaybackQuality”或“suggestedQuality”无效

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

问题是你无法降级质量。一旦你设置为1080p ex，你就不能回到720p。

Answer 1

我从这个网站YouTube Player API Reference for iframe Embeds中取了示例。我手动添加了一个按钮来改变工作质量，这是工作代码。

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

最初 onPlayerReady ，质量设置为 360p 。点击更改质量按钮后，质量设置为144p。

Answer 2

尝试停止视频，然后设置播放质量，然后重新开始播放。

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

setPlaybackQuality无法使用YouTube JS API

2 个答案: