jQuery 视频点击答案

【问题标题】：jQuery Video ClickjQuery 视频点击
【发布时间】：2011-10-06 19:31:48
【问题描述】：

我有这个 youtube 代码：

现在，我想在用户点击视频时（点击播放时）执行一些操作。我试图让 iframe 点击，嵌入点击.. 没有任何效果。我做错了什么？

谢谢！

【问题讨论】：

您可以发布您已经尝试过的脚本吗？其中一个可能有错误。
您好，没有任何错误，因为当我在 iframe 外部单击时它起作用了。（换行之类的）我只是想不出当用户点击播放时我该怎么做。
哦。我得到了它。谢谢 Spraky，会努力做得更好;)

标签： jquery iframe youtube

【解决方案1】：

您不能在iframe 内执行任何操作，这不是来自同一站点。这是禁止的。阅读same origin policy。

【讨论】：

感谢您的快速回答。那么我能做什么呢？当用户点击播放时，我该怎么做？
@AdamGold 您可以阅读 Youtube API 并查看播放按钮为您提供的功能。 code.google.com/apis/youtube/overview.html
非常感谢 Sotiris，会的。我很感激你的回答！ :)
@AdamGold 欢迎您！关于您与@Sparky672 的讨论，请在此处阅读更多内容meta.stackoverflow.com/questions/5234/…

【解决方案2】：

我刚刚在谷歌代码游乐场写了这个修改：

 <!--
 You are free to copy and use this sample in accordance with the terms of the
 Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>YouTube Player API Sample</title>
    <style type="text/css">
      #videoDiv { 
        margin-right: 3px;
      }
      #videoInfo {
        margin-left: 3px;
      }
    </style>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
      google.load("swfobject", "2.1");
    </script>    
    <script type="text/javascript">
      /*
       * Polling the player for information
       */

      // This function is called when the player changes state
      function onPlayerStateChange(newState) {
        if(newState == 3)
          alert('Video playing');
      }

      // This function is automatically called by the player once it loads
      function onYouTubePlayerReady(playerId) {
        document.getElementById("ytPlayer").addEventListener("onStateChange", "onPlayerStateChange");
      }

      // The "main method" of this sample. Called when someone clicks "Run".
      function loadPlayer() {
        // The video to load
        var videoID = "ylLzyHk54Z0"
        // Lets Flash from another domain call JavaScript
        var params = { allowScriptAccess: "always" };
        // The element id of the Flash embed
        var atts = { id: "ytPlayer" };
        // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
        swfobject.embedSWF("http://www.youtube.com/v/" + videoID + 
                           "&enablejsapi=1&playerapiid=player1", 
                           "videoDiv", "480", "295", "8", null, null, params, atts);
      }
      function _run() {
        loadPlayer();
      }
      google.setOnLoadCallback(_run);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="videoDiv">Loading...</div>
  </body>
</html>

如果您使用这种方式嵌入视频，那么只要视频的状态发生变化，就会调用 onPlayerStateChange 函数。 state == 3 表示视频处于开头并开始播放。 state == 1 表示视频正在播放，所以如果你想检测多次（IE 如果他们暂停并再次点击播放）你需要使用 newState == 1 我把 newState == 3. 但是如果你只想检测他们第一次开始播放视频时这应该可以工作。

【讨论】：