如何在嵌入 Youtube 视频后显示某些内容答案

【问题标题】：How to show something after embedded Youtube video如何在嵌入 Youtube 视频后显示某些内容
【发布时间】：2012-10-28 00:02:12
【问题描述】：

我正在建立一个网站，但对此并不陌生。我正在尝试做的是在网站中嵌入一个 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>

但我没有看到视频出现。如果我点击播放，我会收到一条消息说“未定义”

【问题讨论】：

标签： youtube webpage

【解决方案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>

【讨论】：

感谢您的回答，但是，视频一开始就永远不会加载...我将编辑问题以澄清这一点..