3

我试图找出一种在 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 视频的结尾触发它？

非常感谢

4

2 回答 2

2 
<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>
于 2012-10-12T22:05:35.063 回答
0

使用onStateChangeYoutube Player 的事件并检查当前的播放器状态。如果状态是YT.PlayerState.ENDED那么你可以触发模态对话框。

来自 Youtube JavaScript player 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
   }
}
于 2012-10-11T22:57:23.203 回答