How to find out when a youtube embedded iframe is loaded

问题

I am trying to embed a youtube iframe into my application and listen to when that youtube video is loaded and ready to be played; my idea is to have a user press a play button, and not be shown the autoplaying embedded video until the video is completely ready to be played, and thus the user doesn't have to press a button and then wait for the embedded player to load.

I tried taking a look at this youtube iframe api documentation and various related stack overflows but still find myself stuck on how I can add a listener to my iframe player to find out when the video is completely loaded. The onLoad global event attribute doesn't seem to be the solution I am looking for either. How can I find out when a particular youtube embedded iframe video is completely loaded and ready to be played? Am I implementing the iframe api incorrectly? You can see my attempt at it below. Thanks!

const YoutubePlayer: React = () => {
  const readyFn = () => console.log('ready');
  let player;
  const onYouTubePlayerAPIReady = () => {
    player = new window.YT.Player("youtube-iframe-id", {
      height: '390',
      width: '640',
      videoId,
      events: {
        onReady: readyFn,
      },
    });
  };

  return (
    <iframe
      allowFullScreen
      id="youtube-iframe-id"
      src="https://www.youtube.com/embed/XmnZ9HZTHjw"
    />
  );
};


ReactDOM.render(<YoutubePlayer />, app);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>

<div id="app"></div>

回答1:

Actually an iframe is like another thread of JavaScript inside the page. And with this condition you just can have connection between threads with posting message and listening them with addEventListener. like below:

document.addEventListener('message', () => { /* Do Something */ }, false);

And for loading of YouTube you can use the onLoad method to post the message that the video is loaded and pass it to another thread and the another thread Do Something.

I hope my answer will help you my friend.

回答2:

do this on your html page

 <iframe id="ik_player_iframe"
 frameborder="0" height="315" src="https://www.youtube.com/embed/3-vF7ytJxnI"
 width="560"></iframe>

    function onYouTubeIframeAPIReady() {
      //creates the player object
      ik_player = new YT.Player('ik_player_iframe');

      console.log('Video API is loaded');

      //subscribe to events
      ik_player.addEventListener("onReady",       "onYouTubePlayerReady");
      ik_player.addEventListener("onStateChange", "onYouTubePlayerStateChange");
    }

    function onYouTubePlayerReady() {
      console.log('Video is ready to play');
    }

    function onYouTubePlayerStateChange(event) {
      console.log('Video state changed');
    }

回答3:

I ended up injecting the script when the component mounted and adding the event listeners as outlined in this answer.

来源：https://stackoverflow.com/questions/59025419/how-to-find-out-when-a-youtube-embedded-iframe-is-loaded