CreateJS 1.0.0のVideoBufferクラスを使う

HTMLビデオをシークしたりループするとき、新しいフレームを表示するまでに少し間が空いたりします。それは、Canvasで再生するビデオが点滅してしまう原因のひとつです。 EaselJS 1.0.0から新たに備わったVideoBufferクラスは、ビデオの各フレームをオフスクリーンCanvasに描画することにより、前のフレームを保持してこの問題を解決します。

Bitmapクラスでビデオを表示する

まず、VideoBufferクラスは使わずに、EaselJSでビデオをCanvasのうえで再生しましょう。Bitmap()コンストラクタにvideo要素(HTMLVideoElement)を渡し、インスタンスはStageオブジェクトに加えます。つぎのコードが、ビデオを再生するサンプルです(図001)。

var stage = new createjs.Stage(canvasElement);
var videoElement = document.createElement('video');
var bitmap = new createjs.Bitmap(videoElement);
stage.addChild(bitmap);
videoElement.src = 'assets/video.mp4';
videoElement.autoplay = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener('tick', stage);

図001■Canvas上で再生されるビデオ

VideoBufferクラスで描画フレームをバッファする

VideoBufferクラスで毎フレームの描画を保つには、コンストラクタにvideo要素を渡します。そして、つくられたVideoBufferインスタンスを、Bitmap()コンストラクタの引数にすればよいのです。

buffer = new createjs.VideoBuffer(videoElement);
bitmap = new createjs.Bitmap(buffer);

前掲のサンプルのコードは、VideoBufferクラスを使うとつぎのように書き替えられます。実際の作例は、「EaselJS 1.0.0: Using VideoBuffer class」としてjsdo.itに掲げました。

const stage = new createjs.Stage(canvasElement);
const videoElement = document.createElement('video');
const buffer = new createjs.VideoBuffer(videoElement);
const bitmap = new createjs.Bitmap(buffer);
stage.addChild(bitmap);
videoElement.src = 'assets/video.mp4';
videoElement.autoplay = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener('tick', stage);