3

MediaElement.js を介してラップされた YouTube で再生イベントを検出するためのフォローアップの質問です。質問で再生またはクリックイベントを検出しようとしましたが、クロスオリジンの問題のために検出できませんでした (おそらく)。また、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ストリームをキャンバスに描画するための他のより有望なアプローチを知っている人はいますか? ありがとう。

4

1 に答える 1

4

canvasdrawImageを使用して、別のドメインからの <video> または <img> を描画することはできません。

サーバー経由で Youtube ストリームをプロキシできるかもしれませんが、それはおそらく Youtube TOS に反します。

于 2013-01-06T23:31:01.387 に答える