2015年1月17日土曜日

YouTubeのJavaScript Player APIで、再生途中でイベントを発生させる

YouTubeのJavaScript Player APIを組み込んでみました。動画再生後、60秒経過したら、ログインページにジャンプする例です。会員登録して欲しいけど、動画もちょっと見て欲しい(?)という場合などに使えると思います。

<script src="https://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
var current_time;

// 再生エリアの準備
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '460',
    videoId: 'abcdeeg1234',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 再生
function onPlayerReady(event) {
  // event.target.playVideo();
}

// 再生された場合、1秒毎に状態をチェック
function onPlayerStateChange(event) {
  if(event.data === 1) {
    setInterval('pastTime()',1000);
  }
}

// 60秒経過したら、ログインページにジャンプ
function pastTime()
{
  current_time = Math.round(player.getCurrentTime()*10)/10;
  if ( current_time >= 60 ) {
    location.href = "http://yourdomain.com/loginplease";
  }
}
</script>

<div id="player"></div>


参考サイト
player.getCurrentTime() stopped working(Stack Overflow)

0 件のコメント:

コメントを投稿