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 Reference做了类似的事情，注册一个函数onStateChange。当视频结束时，该函数应该被传递0。

您可能会尝试在视频上放置一个元素，但您必须告诉 flash 坚持它的 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 回答