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倍速などに対応。FirefoxとOperaは再生速度の変更は未対応との結果になりました。
ちなみに、この様に優秀なSafariですがWindows版ではHTML5 videoは残念ながら再生すらできないそうです。
Flash vs HTML5 ビデオ再生は?
http://www.matzmtok.com/blog/?p=485