我正在使用 clmtrackr here 的示例。我正在尝试使用 <iframe>作为代码的视频源(与使用标签相反，这样做不会返回任何结果。

示例代码:

<div id="container"> 
        <video id="video" width="368" height="288" autoplay="" loop=""> 
          <source src="./media/franck.ogv" type="video/ogg"> 
        </video> 
        <canvas id="canvas" width="368" height="288"></canvas> 
      </div> 
 
<script> 
        var videoInput = document.getElementById('video'); 
        var ctracker = new clm.tracker(); 
        ctracker.init(pModel); 
        ctracker.start(videoInput); 
 
                function positionLoop() { 
          requestAnimationFrame(positionLoop); 
          var positions = ctracker.getCurrentPosition(); 
          // do something with the positions ... 
          // print the positions 
          var positionString = ""; 
          if (positions) { 
            for (var p = 0;p < 10;p++) { 
              positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>"; 
            } 
            document.getElementById('positions').innerHTML = positionString; 
          } 
        } 
        positionLoop(); 
        var canvasInput = document.getElementById('canvas'); 
        var cc = canvasInput.getContext('2d'); 
 
          function drawLoop() { 
          requestAnimationFrame(drawLoop); 
          cc.clearRect(0, 0, canvasInput.width, canvasInput.height); 
          ctracker.draw(canvasInput); 
        } 
        drawLoop(); 
            </script> 

有人尝试过吗？任何帮助将不胜感激!

谢谢，

请您参考如下方法:

在大多数情况下，由于浏览器/DOM 内置的安全措施，这是不可能的。

clmtrackr 需要访问视频文件的像素，为此，它需要直接访问 <video>元素，在您的情况下位于 iframe 内。为此，您需要进入 iframe 内部的 DOM 元素来查找视频元素并将其传递给 clmtrackr。但是，除非 iframe 是从与外部页面相同的域提供服务的，否则无法执行此操作。

据推测，如果 iframe 来自您自己的网站，那么您已经有办法访问视频文件的源 URL 并可以创建您自己的元素。那么你就不需要 iframe 了。因此，我假设您正在尝试访问另一个视频托管网站，例如 YouTube。

现在，为了彻底，即使您可以访问 iframe 内的视频元素，或者您可以以某种方式推断视频文件的 url 并创建您自己的元素，clmtrackr 也无法访问像素，除非该视频文件曾经再次，来自同一域。这是另一项安全措施。

异常(exception)情况是视频带有 CORS header ，如下所述: http://jbuckley.ca/2012/02/cross-origin-video/

这里: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

不幸的是，很少有视频托管服务提供带有 CORS header 的视频。