3

YouTube ビデオの終了時に JavaScript モーダル ポップアップ/ポップオーバーをトリガーする方法を見つけようとしています。

私はこれが UpWorthy.com で達成されたことを最初に見ました。ビデオが終了したときの例については、このビデオを参照してください: http://www.upworthy.com/bully-calls-news-anchor-fat-news-anchor-destroys-him-on-live-tv

埋め込みコードに JS パラメータを追加して JavaScript API を有効にしました (enablejsapi=1)

この単純なモーダル スクリプトを使用してモーダルを実現しています: 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

Youtube Playerのイベントを使用してonStateChange、現在のプレーヤーの状態を確認します。状態が次の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 に答える