0

確かに何らかの方法で達成する必要があるとは思いませんが、方法がわからないので、助けていただければ幸いです;) EaselJSを使用して、HTML5キャンバスでビデオを次のようにレンダリングしています:

HTML

<div>
  <canvas id="terminal1" width="140" height="82">
  <video id="video1" loop="true" width="127" height="70" autoplay="true" src="/url/to/video.mp4"> 
  <source  type="video/mp4"/> 
  </video>
</div>

Javascript

function init() {
  stage = new Stage(document.getElementById("cnvs_images"));
  var videoTag = document.getElementById('videoTag');
  video = new Bitmap(videoTag);
  video.visible = true;
  terminal1 = new Stage(document.getElementById('terminal1'));
  stage.addChild(video);
}

function tick() {
  stage.update();
  stage_terminal1.update();
}

Javascriptコードにあまり注意を払わないでください...私は覚えている私の実際のコードの基本に合成しました。多くのチュートリアルで指定されている EaselJS の通常の方法でビデオをレンダリングしていると言うのは単なる参考です。したがって、このスニペットは機能しない可能性がありますが、アイデアは得られます。私の実際のコードは完璧に動作します!

ビデオのすべてを再生するのではなく、ビデオの 1 フレームだけをレンダリングする方法を知っているかどうかを知りたいだけです。

私は自分のアプリケーションに多くのキャンバスを使用していますが、必要なすべてのビデオ (6 つのビデオ、6 つのキャンバス) をレンダリングすると、超低速ではないにしても、アプリの速度が少し低下します。指定されたビデオのプレビジュアライゼーション (数秒) または 1 つのフレームだけをレンダリングしたいだけです。私はすでに多くの機能コードを実行しているので、EaselJS で実行する必要があります =)

誰かが私を啓発してもらえますか?? どうもありがとう =)

4

1 に答える 1

1

正直なところ、現時点ではほとんどできないと思います。アプリケーションで対応するコードセクションを非アクティブ化し、ビデオの上にキャンバスをオーバーレイしただけです。

主な問題は、ビデオがシークした後、ビデオが十分に速く更新されないことがあり、ビデオが再生されていない限り、発生したイベントも実際には役に立たないことです。結局、キャンバスにたくさんの黒い画面を描くことになりました。タイムアウトを使用して独自のcopy2canvas関数を呼び出すことは少し役に立ちましたが、システムまたはネットワークの速度が少し遅くなるとすぐに、動作しなくなります。

それでも試してみたい場合は、チュートリアルをご覧ください：http ://www.html5rocks.com/en/tutorials/video/basics/#toc-fun-canvas

于 2012-06-13T15:29:13.323 に答える