強火で進め

このブログではプログラム関連の記事を中心に書いてます。

HTML5 videoの再生速度変更について調べてみた


HTML5 videoの再生速度変更は以下の様な記述で可能なのですがブラウザによって対応状況が異なる様なのでそれぞれのブラウザの対応状況を調べてみました。

video = document.getElementById('video');
video.playbackRate = 2.0; // 2倍速で再生

調査に使用したサンプルは以下のものです。

動画の再生速度変更(MPEG4)
http://tsuyobi.heteml.jp/html/html5/video/playbackRate/mp4.html

動画の再生速度変更(Ogg Theora形式)
http://tsuyobi.heteml.jp/html/html5/video/playbackRate/theora.html

調査したOSはMac(Snow Laopard)で、それぞれのブラウザの対応状況以下の様になりました(誰かWindowsでの対応状況も調査して貰えると嬉しいです)。

ブラウザ 動画のフォーマット 結果
Firefox 3.6 Ogg Theora形式 等速での再生のみ。速度変更しても反映されない
Safari MPEG4(H.264) スロー、倍速再生、0倍速、逆再生とすべてのパターンが反映される
Chrome 5.0.307.11 beta MPEG4(H.264) スロー、倍速再生、0倍速などは反映される。逆再生は反映されない
Chrome 5.0.307.11 beta Ogg Theora形式 スロー、倍速再生、0倍速などは反映される。逆再生は反映されない
Opera 10.50 Beta Ogg Theora形式 等速での再生のみ。速度変更しても反映されない

Ogg Theora形式とMPEG4の両方に対応しているChrome以外は対応しているフォーマットのもののみの記載となります。

Safariが逆再生も含めてすべてパターンに対応、Chromeはスロー、倍速再生、0倍速などに対応。FirefoxOperaは再生速度の変更は未対応との結果になりました。

ちなみに、この様に優秀なSafariですがWindows版ではHTML5 videoは残念ながら再生すらできないそうです。

Flash vs HTML5 ビデオ再生は?
http://www.matzmtok.com/blog/?p=485