2

iFrame API を使用して YouTube ビデオを制御できるメニューを簡単に作成しようとしています。id="pause_button" を使用して HTML にボタンを配置し、jquery を使用してクリック時にビデオを一時停止する関数を作成しようとしました。以下は私のHTMLドキュメントです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">

  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.paresntNode.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', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }

</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#pause_button").click(function(){
        $("#test").append("TEST");
        player.pauseVideo();
    });
});
</script>

</head>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com" frameborder="0">
    </iframe>

    <button id="pause_button">STOP</button>
    <div id="test">TEST<br /></div>
  </body>
</html>
4

1 に答える 1

1

undefined のメソッド「insertBefore」を呼び出せないという最初のエラーは、コードのタイプミスによるものです。次のようにする必要があります。

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

（あなたはparesntNodeを持っています。）

2 番目のエラーは、iframe の URL のパラメーターの起源によるものです。サンプルのオリジン (http://example.com) を残しましたが、コードが実行されているサーバーの値に設定する必要があります。これは、スクリプトがプレーヤーのメソッドとやり取りできるようにするためのセキュリティ対策です。

于 2012-11-21T07:39:39.957 に答える