« 雑談：Twitter | メイン | 電子書籍(ePub)変換：calibre »
2010年03月20日
HTML5 Video timeupdate event
HTML 5 videoのtimeupdateイベントを使ってVideo→Canvasに描画。
この場合、FirefoxはCanvas側にも割とスムーズに描画が行われます。
が、他のブラウザではコマ落ちした状態になります。
Firefoxではほぼフレーム単位でtimeupdateイベントが発生するのですが、他のブラウザでは0.25秒に一度といった具合に少ない頻度でしか発生しません。なのでtimeupdateイベントを使ってCanvasに映像を転送するとカクカクした動きになってしまうという事態が発生します。
単純にsetTimeout(), setInterval()でコピーした方がスムーズ、リアルタイムに再生されます。
loop属性が設定されているとendedイベントが発生しないというのもメモ。
投稿者 openspc : 2010年03月20日 03:54