私はちょっと答えを探していて、決まったものを見つけていません。HTML5キャンバスを使ってビデオを再生することも可能ですユーザーがこの動画に描画できるようにしますか？ユースケースは、無限ループでビデオを再生することで、ユーザーは関心領域を示すために特定の領域に複数のボックスを描くことができます。HTML5キャンバス上に図形を描く...ビデオ付き
ボーナス（：P）として、これをどうやって行うのかを知ることができれば、Drupal内でどのようにこれを行うことができるかについてのヒントはありますか？私はすでにキャンバスフィールドモジュールを見ていますが、この点についてのヒントがあれば（最初のものが優先です）、それはすばらしいでしょう！
キャンバスにhtml5ビデオ要素を描画できます。 drawImageメソッドは、イメージ要素と同様に、最初のパラメータのvideo要素を受け入れます。これにより、ビデオ要素の現在の「フレーム」がキャンバスにレンダリングされます。ビデオを流体再生するには、ビデオを繰り返しキャンバスに描画する必要があります。
次に、キャンバスを通常の方法で描画し、ビデオフレームが更新されるたびにすべてを再描画することができます。
私は最近、この機能を提供するために、クライアントからこの要求を受け、それがCMSフレンドリーでなければなりません。この技術は、繰り返し、あなたが、あなたはすでにビデオ要素を持っていると仮定すると、次のフレーム
をペイントするを使用して
srcは、ビデオの現在のフレームの編集済みバージョンです。その描画機能でを自分自身を呼び出すために使用再帰私はあなたにこのなさ（およびコンテンツ管理システムに使用できる）ことの2つの例を与えることができます
最初はここにある：https://jsfiddle.net/yywL381w/19/
SDLという会社は、ビデオをホストするMedia Managerというツールを作ります。あなたが見ているのは、data-*からそのパラメータを受け取り、Media Manager Rest APIからリクエストし、ビデオを作成し、data*属性に完全に基づいてエフェクトを追加するjQueryプラグインです。そのプラグインは、他のソースから呼び出されたビデオを扱うために簡単に調整することができます。使用方法の詳細についてはrepoをご覧ください。
もう一つの例はここにある：http://codepen.io/paceaux/pen/egLOeR jQueryプラグインではありません
。代わりにES6クラスです。あなたは、画像/動画を作成し、これにクロップ効果適用することができます：あなたが観察します
let imageModule = new ImageCanvasModule(module);
imageModule.createCanvas();
imageModule.drawOnCanvas();
imageModule.hideOriginal();
を、ImageCanvasModuleクラスでは、この方法：
drawFrame() {
if (this.isVideo && this.media.paused) return false;
let x = 0;
let width = this.media.offsetWidth;
let y = 0;
this.imageFrames[this.module.dataset.imageFrame](this.backContext);
this.backContext.drawImage(this.media, x, y, width, this.canvas.height);
this.context.drawImage(this.backCanvas, 0, 0);
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
}
}
クラスは、第二のキャンバスを作成しました、描画に使うそのキャンバスは表示されません。ブラウザを心から救うだけのものです。コンテンツ管理可能である
「操作」を「フレーム」this.imageFrames[this.module.dataset.imageFrame](this.backContext);
です（CMSでテンプレートで出力することができる）画像/動画に保存されている属性です。これはimageFrameの名前を取得し、それを一致する関数として実行します。また、コンテキストで送信します（必要に応じて、バックキャンバスまたはメインキャンバスの描画を切り替えることができます）
次にthis.backContext.drawImage(this.media, x, y, width, this.canvas.height);はバックコンテキストでイメージを描画します。
最後に、これはメインキャンバスにthis.context.drawImage(this.backCanvas, 0, 0);と表示されています。バックキャンバスを取り、メインキャンバスに描画します。したがって、表示されるキャンバスの操作量は最小限に抑えられます。
最後に、これは動画であるため、新しいフレームを描画したいと考えています。だから我々は、関数呼び出し自体を持っている：
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
この全体のセットアップは、私たちは、出力にユーザが画像の周りに描かれることを望んで、フレームの種類を含むdata-*属性をCMSを使用することができます。 JavaScriptはその画像またはビデオのキャンバス化バージョンを生成します。サンプルのマークアップは、次のようになります。
<video muted loop autoplay data-image-frame="wedgeTop">