Question

我正在建立一个网站，我是新手。我想要做的是在网站上嵌入一个YouTube视频，一旦视频结束，它会在网站上显示其他内容，在我的例子中是一个editText，用户可以输入一个单词。

我不在乎editText是出现在视频的位置还是在其下方或沿着这些线的任何位置。

我发现了以下几件事情：

how to display lightbox after Video Play Finishes?

但没有发生

还试过这段代码

<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>

但我没有看到视频出现。如果我点击Play

，我会收到一条消息“未定义”

Answer 1

您链接的方法应该起作用。 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>

嵌入式Youtube视频后如何显示内容

1 个答案: