0

私はウェブサイトを構築していますが、これは初めてです。私がやろうとしているのは、ウェブサイトに埋め込まれたYouTubeビデオを取得することです。ビデオが終了すると、ウェブサイトに別の何かが表示されます。私の場合、ユーザーが単語を入力できるeditTextです。

editText がビデオがあった場所に表示されるか、そのすぐ下に表示されるか、またはそれらの行に沿って表示されるかは気にしません..

次のようなものがいくつか見つかりました。

ビデオ再生終了後にライトボックスを表示する方法は?

しかし、何も起こらなかった

このコードも試しました

<html>
<head>
<script type="text/javascript" src="public/javascripts/swfobject.js"></script> 
</head>

<body>

<div id="ytapiplayer">
    You will need Flash 8 or better to view this content.
</div>

<script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "ytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/OQSNhk5ICTI&enablejsapi=1&playerapiid=ytplayer", "ytapiplayer", "425", "365", "8", null, null, params, atts);

    function onYouTubePlayerReady(playerId) {
        alert('Player loaded');
        ytplayer = document.getElementById("ytplayer");
    }

    function play() { 
        alert(typeof ytplayer);
        if (ytplayer) { 
            alert(ytplayer.playVideo); 
            ytplayer.playVideo(); 
        } 
    }
</script>



 <a href="javascript:void(0);" onclick="play();">Play</a>

 </body>
 </html>

しかし、ビデオが表示されません。[再生] をクリックすると、「未定義」というメッセージが表示されます

4

1 に答える 1

0

あなたのリンクからのアプローチはうまくいくはずです。YouTube Player API リファレンスは、関数を登録することで同様のことを行いますonStateChange。ビデオが終了したら、その関数を渡す必要があります0。

ビデオの上に要素を配置しようとするかもしれませんが、これを行うには z レベルに固執するようにフラッシュに指示する必要があります。wmode: "opaque"変数に追加できplayerVarsます。これにより、要素を上に配置できるようになります。

編集 - これを試してください：

<!DOCTYPE html>
<html>
  <body>
    <div id="ytapiplayer"></div>
    <script>
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytapiplayer', {
          height: '390',
          width: '640',
          videoId: 'OQSNhk5ICTI',
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerStateChange(event) {
        if (event.data == 0) {
          alert("Finished!");
        }
      }

    </script>
    <p>
      <a href="javascript:void(0);" onclick="player.playVideo(); return false;">Play</a>
    </p>
  </body>
</html>
于 2012-10-28T00:29:47.740 に答える