動画をCanvasに描画したい。なるべく自動再生したい。
いろいろやり方を考えてみたんですが、現状としては
- PCは当然できる
- iOSではなんとかごまかせる
- Androidは再生に何かしらユーザの動作が必要
という理解になりました。
iOSのやり方は、他のサイトなどでも紹介されていますが、videoのcurrentTimeを動的に変更しつつ、Canvasに描画すれば、再生できます。
var video = document.createElement("video");
var context = document.getElementById("canvas").getContext("2d");
var tickTime = 1000/60/1000;
video.src = "movie/sakura.mp4";
video.load();
function tick(){
video.currentTime += tickTime;
if(video.currentTime >= video.duration){
video.currentTime = 0;
}
context.drawImage(video, 0, 0, 360, 202);
requestAnimationFrame(tick);
}
video.addEventListener("canplay", function(){
tick();
});
サンプル(※Safari/iOSSafari以外はおそらくバグります。)
これで行ければよいのですが、残念ながらAndroidでは描画されません。また、PCでもSafari以外はこの方法が使えないようです。(IE11/Chrome/Firefoxでうまく動作せず)
普通に、videoをplayしている状態であれば、currentTimeを変更できるんですが、再生を開始せずに、currentTimeを操作する良い方法が見つかりませんでした。
当然、Androidではタップなどユーザアクションなしで再生させることはできないはずなので、無理やりtouchstart等のイベントを使うか、開始ボタンなどを使う必要がでてきます。
本当は、動画再生の方法を調べていたのではなく、タイマーを一元管理するためのライブラリを作ってその検証のために動画を操作していたんですが…。スマホで動画を自動で再生させるスマートな方法が現状なさそうなので、別のサンプルにしようと思います。。
昔動画は厳しそう、ということで動画をスプライトシートに変換して表示させたのですが、その時の判断はおそらく正しかったんだと思います。まあ、これはこれでデメリットもあるんですが…そちらについてはおいおい記事にしてみようと思います。
参考 :
