在 html5 画布中绘制 youtube答案

【问题标题】：Draw youtube in html5 canvas在 html5 画布中绘制 youtube
【发布时间】：2012-12-20 16:59:29
【问题描述】：

这是Detect play event in youtube wrapped via MediaElement.js 的后续问题。我试图检测问题中的播放或点击事件，但由于跨域问题（可能）而无法做到这一点。我还发现你直接把 youtube 剪辑画到画布上，不会被复制（会是空白），像这样：

<!DOCTYPE html>
<html>
<head>
  <title>video in canvas</title> 
  <link rel="stylesheet" href="mediaelementplayer.css" />

  <script src="jquery.js"></script>
  <script src="mediaelement-and-player.min.js"></script>

  <script> 
  $(document).ready( function() {
    $('#v').mediaelementplayer();

    var v = $('#v')[0];
    var canvas = $('#c')[0];
    var context = canvas.getContext('2d');

    console.log('play event entered');
    draw(v, context, 640, 360);
  });

  function draw(v, c, w, h) {
    // if(v.paused || v.ended)  return false;
    console.log("draw event entered");
    c.drawImage(v, 0, 0, w, h);
    setTimeout(draw, 20, v, c, w, h);
  }
  </script> 
</head>

<body>
  <video width="640" height="360" id="v" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI"/>
  </video>
  <canvas id="c" width="640" height="360"></canvas> 
</body>
</html>

有人知道在画布上绘制 youtube 流的其他更有前途的方法吗？谢谢。

【问题讨论】：

标签： javascript html video canvas youtube

【解决方案1】：

您不能使用画布drawImage 来绘制来自不同域的

也许您可以通过您的服务器代理 Youtube 流，但这可能违反 Youtube TOS

【讨论】：

如果违反 youtube TOS，我猜他们可能会采取措施阻止人们代理他们的网站。只是想知道是否有可能避免人们代理某个网站（可能会在 SO 上为此打开另一个问题）？
这可能是一个有趣的阅读developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS .. 但这取决于服务器（在本例中为 youtube）回复某些 HTTP 标头