Question

我正在使用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>

有人试过这个吗？任何帮助将不胜感激！

谢谢，

Answer 1

在大多数情况下，由于浏览器/ DOM中内置了安全措施，因此无法实现这一点。

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

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

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

例外情况是视频是否使用CORS标头提供，如下所述： http://jbuckley.ca/2012/02/cross-origin-video/

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

很遗憾，很少有视频托管服务使用CORS标头为其视频服务。

使用<iframe>作为clmtrackr </iframe>的来源

1 个答案: