強制所有的YouTube視頻播放與1080高清在HTML

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> 

我真的不知道現在該怎麼做。

這是截圖的HD例如：

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