javascript - setPlaybackQuality 不起作用 YouTube JS API

标签 javascript html youtube-api

第一个视频以 1080p 加载,而不是当我按下 class="quality" 按钮时,它应该将质量更改为 720p,但它不起作用HTML5 播放器。

它适用于 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,就无法再返回到 720p。

最佳答案

我从这个网站 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。

关于javascript - setPlaybackQuality 不起作用 YouTube JS API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27022565/

相关文章:

javascript - 单击时创建 "box-webpage"

php - 如何使用复选框使用 HTML、CSS 正确处理 PHP 表单(URL)?

javascript - 避免使用 jquery 多次选择相同的选项

twitter-bootstrap - Bootstrap Carousel 中的 Youtube iframe - 在幻灯片上停止视频

youtube-api - Youtube API v3 错误 : 403 (playlistItemsNotAccessible)

javascript - 查找二维数组中的索引

javascript - 无法绘制由 "content"或 "background-image"而不是 "src"指定的图像

javascript - 无法创建垂直菜单

jquery - 需要阻止 div 在 JQM 中滚动

javascript - Youtube Media API无法正确加载。