setPlaybackQuality not working YouTube JS API

2019-04-17 12:30发布

站内问答 / JavaScript
1037 2 5

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.

2条回答
再贱就再见
2楼-- · 2019-04-17 12:59

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();
    });    
}
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
3楼-- · 2019-04-17 13:09

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)