Javascript 当YouTube视频结束时，如何显示弹出窗口/弹出窗口？_Javascript_Youtube_Popup_Modal Dialog

Javascript 当YouTube视频结束时，如何显示弹出窗口/弹出窗口？

javascript youtube

Javascript 当YouTube视频结束时，如何显示弹出窗口/弹出窗口？,javascript,youtube,popup,modal-dialog,Javascript,Youtube,Popup,Modal Dialog,我试图找到一种方法，在YouTube视频结束时触发javascript模式弹出/弹出我第一次在UpWorthy.com上看到这一点。有关视频结束时的示例，请参见本视频：我通过向嵌入代码中添加JS参数（enablejsapi=1）启用了javascript api 我使用这个简单的模态脚本来实现模态：如何让youtube视频的结尾触发它非常感谢使用Youtube播放器的onStateChange事件并检查当前播放器状态。如果状态为YT.PlayerState.end，则可以触发模式对话框

我试图找到一种方法，在YouTube视频结束时触发javascript模式弹出/弹出

我第一次在UpWorthy.com上看到这一点。有关视频结束时的示例，请参见本视频：

我通过向嵌入代码中添加JS参数（enablejsapi=1）启用了javascript api

我使用这个简单的模态脚本来实现模态：

如何让youtube视频的结尾触发它

非常感谢

使用Youtube播放器的

onStateChange

事件并检查当前播放器状态。如果状态为

YT.PlayerState.end

，则可以触发模式对话框

来自Youtube JavaScript播放器api参考文档（经过一些修改）


YT试验

您知道youtube视频结束时会触发什么事件吗？这应该在api中的某个地方。嗨，Tariqulazam，我怎样才能在上面给出的示例中添加一个模态框

function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById(playerId);
  ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
   if(newState==YT.PlayerState.ENDED){
        //OPEN Modal dialog box here
   }
}

<html>
<head>
<title>YT Test</title>
<script type="text/javascript">
  <!--
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "http://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: '390',
          width: '640',
          videoId: 'ecccag3L-yw',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // The API will call this function when the video player is ready.
      function onPlayerReady(event) { /* do nothing yet */ }

      // The API calls this function when the player's state changes.

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
                // insert appropriate modal (or whatever) below
                alert('I hope you enjoyed the video')
        }
      }
      -->

</script>
</head>
<body>
<div id="player"></div>
</body>
<html>