Question

我试图想办法在YouTube视频播出时触发javascript模式弹出/弹出窗口。

我第一次看到这是在UpWorthy.com上实现的。有关视频结束时的示例，请参阅此视频：http://www.upworthy.com/bully-calls-news-anchor-fat-news-anchor-destroys-him-on-live-tv

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

我正在使用这个简单模态脚本来实现模态：http://www.ericmmartin.com/projects/simplemodal/

如何触发youtube视频的结尾？

非常感谢

Answer 1

<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>

Answer 2

使用Youtube播放器的onStateChange事件并检查当前播放器状态。如果状态为YT.PlayerState.ENDED，则可以触发模态对话框。

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

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

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

如何在YouTube视频播放完成后显示弹出窗口/弹出框？

2 个答案: