6

我有一个显示嵌入式 youtube 视频的 iFrame。

<iframe width="560" height="315" src="http://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>

我想做的是以某种方式在用户点击你的视频时捕获点击事件，这样我就可以调用http://myserver.com/dostuff rest api 来更新跟踪点击次数和点击次数的外部服务器计数器当然允许视频按预期播放。

任何信息将不胜感激。

4

4 回答 4

4

你不能，我相信。那将是一个安全风险。如果您主要想做跟踪之类的，您可能最好做一些事情，例如在用户单击的视频的位置添加图像/按钮，从而导致视频出现。

编辑：这个解决方案也可以工作；我不确定它是否适用于不在同一域中的 iframe。

于 2012-08-09T22:59:01.583 回答
1

window.postMessage可以提供帮助。但是您应该可以访问在 iframe 中呈现的页面的源代码。因此，在嵌入 youtube 视频的情况下，您可能无法处理此问题。

于 2012-08-09T23:01:14.530 回答
0

每个人都有很好的反馈。感谢所有发帖的人。在尝试了一些技巧之后，底线是通过 html 或 javascript 本身不支持捕获点击事件。

我发现的最好的工件和最干净的解决方案在这里。

于 2012-08-10T18:17:24.550 回答
0 
//Its possible by recording the stateChange in the video. 
//HTML code----

<!DOCTYPE html>
<html>
  <body>
    <div id='vidWrapper'>
    //your iframe tag goes here.
    <iframe id="video-id-first" src="https://www.youtube.com/embed/nNlEiuqiKAk?enablejsapi=1&amp;origin=http%3A%2F%2F3.7.232.244" gesture="media" allow="encrypted-media" allowfullscreen="" data-gtm-yt-inspected-53610233_3="true" width="560" height="400" frameborder="0"></iframe>
    </div>
   </body>
</html>

//JS code ----

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var width = document.getElementById("video-id-first").getAttribute("width");
var height = document.getElementById("video-id-first").getAttribute("height");
var src = document.getElementById("video-id-first").getAttribute("src");
//splitting to get the videoId from src.
var partsArr = src.split("/");
var videoSource = partsArr[partsArr.length -1 ].split("?");
var videoId = videoSource[videoSource.length -2 ];

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('vidWrapper', {
          height:height,
          width: width,
          videoId: videoId,
          events: {
            'onStateChange': function(event) {
              if (event.data == YT.PlayerState.PLAYING) {
                startVideo();
              }
                if (event.data == YT.PlayerState.PAUSED) {
                stopVideo();
              }
            }
          }
        });
      }
      function startVideo() {
      //write your functionality here.
        alert('Video Started');
      }
       function stopVideo() {
       //write your functionality here.
        alert('Video Paused');
      }
于 2021-11-01T17:08:35.463 回答