强制在 html 中使用 720 hd 播放所有 youtube 视频

Question

任何人都可以帮助我修复此代码以强制 youtube 播放具有 720 高清的视频吗？ 我尝试了 4 天，但问题仍然没有解决。 我需要在一页播放2个或更多视频，下面是代码，视频显示“假”720高清，不是真正的720质量，您需要手动调整质量，播放器发生了什么？是youtube播放器的bug吗？

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/51/5e/515ea22c3b785229fb2afd0fd6ef8c92.jpg" onclick="image_01()" />
</a>

<a class="wp-colorbox-inline" href="#player"><img src="http://www.planwallpaper.com/static/cache/b8/14/b81459a5dad107be1518b3238d262ce3.jpg" onclick="image_02()" />
</a>

<div style='display:none'>
    <div id='player' sytle='padding:10px; background:#fff;'>
        <p>
            <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;
                var isrunning_01 = false;
                var isrunning_02 = false;

                function image_01() {
                    isrunning_01 = true;
                }

                function image_02() {
                    isrunning_02 = true;
                }

                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('player', {
                        height: '768',
                        width: '1024',
                        videoId: '7YZBNzYwOME',
                        events: {
                            'onReady': onPlayerReady,
                            'onPlaybackQualityChange': onPlayerPlaybackQualityChange
                        }
                    });
                }

                function onPlayerReady(event) {
                    player.setPlaybackQuality('hd720');
                    if (isrunning_01 == true) {
                        event.target.cueVideoById({
                            videoId: 'xhXo7zIKJIc',
                            suggestedQuality: 'hd720'
                        });
                        event.target.playVideo();
                        isrunning_01 = false;
                    }
                    if (isrunning_02 == true) {
                        event.target.cueVideoById({
                            videoId: 'brNH_Z_QLx4',
                            suggestedQuality: 'hd720'
                        });
                        event.target.playVideo();
                        isrunning_02 = false;
                    }
                }

                function onPlayerPlaybackQualityChange(event) {
                    player.setPlaybackQuality('hd720');
                }

                function onPlayerStateChange(event) {
                    player.setPlaybackQuality('hd720');
                }
            </script>
        </p>
    </div>
</div>

我现在真的不知道该怎么做。

这是截图的高清示例：

Answer 1

这段代码完成了我的工作：

// 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '400',
            width: '600',
            videoId: 'VIDEOID',
           // playerVars: { 'autoplay': 1 },
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    // In this case we set the playback quality to 1080p
    function onPlayerReady(event) {
        event.target.setPlaybackQuality('hd720');
    }

有一个例子： http://codepen.io/bra1N/pen/RRdWKk