YouTube Player API ไม่ทำงานตามเอกสาร

Question

ดูเหมือนว่า YouTube Player API จะไม่ทำงานในขณะนี้ โปรแกรมเล่นจะเริ่มต้นอย่างถูกต้อง แต่ไม่มีวิธีการหรือเหตุการณ์ใดที่ใช้งานได้

<div class="flex">
    <div id="player"></div>
    <div id="log"></div>
</div>

<script>
    // for convenience
   var isPlayerReady = false;
   var logEl = document.getElementById('log');

   function addToLog(text) {
       logEl.innerHTML = logEl.innerHTML + text + '<br>';
   }

   window.setTimeout(function () {
       if (!isPlayerReady) {
           addToLog('5 seconds have passed and the player has not fired the onReady event. This is a good indication that the API is not working properly.');
       }
   }, 5000);
   
   // from here on, the code is a direct copy of an example from the official docs

   // 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() {
       addToLog('onYouTubeIframeAPIReady fired, loading Player');
       player = new YT.Player('player', {
           height: '390',
           width: '640',
           videoId: 'M7lc1UVf-VE',
           events: {
               'onReady': onPlayerReady,
               'onStateChange': onPlayerStateChange
           }
       });
   }

   // 4. The API will call this function when the video player is ready.
   function onPlayerReady(event) {
       isPlayerReady = true;
       addToLog('onPlayerReady fired');
       event.target.playVideo();
   }

   // 5. The API calls this function when the player's state changes.
   //    The function indicates that when playing a video (state=1),
   //    the player should play for six seconds and then stop.
   var done = false;

   function onPlayerStateChange(event) {
       addToLog('onPlayerStateChange fired');
       if (event.data == YT.PlayerState.PLAYING && !done) {
           setTimeout(stopVideo, 6000);
           done = true;
       }
   }

   function stopVideo() {
       player.stopVideo();
   }
    </script>

ฉันสร้างง่ายๆ codepen เพื่อตรวจสอบปัญหาที่นี่ ส่วนใหญ่ของตัวอย่างนี้เป็นสำเนาโดยตรงของหนึ่งในตัวอย่างในเอกสารอย่างเป็นทางการ

Answer 1

[EDIT] พบวิธีแก้ปัญหาจากเครื่องมือติดตามปัญหาของ Googleนี้ ดูเหมือนว่าจะเป็นปัญหาของเบราว์เซอร์

ลองสิ่งเหล่านี้:

• ล้างแคชรวมถึงคุกกี้
• ลองปิดการใช้งานchrome: // flags / # same-site-by-default-cookiesแล้วนำกลับมา (ใช้ได้กับฉัน)

หวังว่าจะช่วยได้🙃

===

คุณไม่ได้โดดเดี่ยว! ฉันมีรหัสที่ใช้on...เหตุการณ์ ( onReadyฯลฯ ) ซึ่งใช้งานได้เมื่อสองสามวันก่อนและหยุดทำงานกะทันหันโดยไม่มีการเปลี่ยนแปลงรหัส

• มีการโพสต์บน Google Issue Tracker (ดูที่นี่ )
• นี่คือโพสต์ stackoverflow อื่นที่ระบุปัญหาเดียวกัน
• มันไหลลงไปยังไลบรารีย่อยเช่นreact-youtube(ดูฉบับที่ 260 )

ดูเหมือนว่าจะเริ่มในวันที่ 9 กันยายนซึ่งสอดคล้องกับการเปิดตัว Youtube Data API (ดูประวัติการแก้ไขสำหรับวันที่ 9 กันยายน ) แต่ฉันไม่เห็นสิ่งใดในรายการที่อาจทำให้เหตุการณ์ / ฟังก์ชันของ iframe เสียหาย comprom

นั่นคือสิ่งที่ฉันได้รับความหวังว่าจะเป็นคำใบ้ให้ใครบางคนได้รับการแก้ไข 🤷🏼‍♂️ จะอัปเดตความคิดเห็นนี้เมื่อมีการค้นพบ