iPad/iPhone で HTML5の自動再生を実現する方法 (iOS4 対応版)
iPad/iPhone では、HTML5 の Video/Audio タグの 自動再生(autoplay) 属性の指定がきかないという制約がある。これは Apple のドキュメントにも明記されている。
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.
で、これを回避する方法としては、Rob LaPlaca とか、404 Not Found とかに書いてある方法を使えばよかったのだけど、この方法 iOS4 だと動かなくなった。
じゃ、どうするかというと、CodeBlog.co - Getting Autoplay Working on iOS に書いてある方法を使う。以下、このソースから抜粋。
これが video タグ。
で、対応する Javascript がこれ。
window.onload = function() {
var pElement = document.getElementById("myVideo");
pElement.load();
pElement.play();
};
play する前に load しておくだけ。前出の方法より簡単になって、iOS4 でも動くという優れもの。
最近 HTML5 での iPad/iPhone アプリ開発やっていて思うのは、昨日書いた画像容量の制限といい、Apple が制限かけている部分がわかりにくいのが難点。だけど、iPad/iPhone の HTML5/CSS3 の実装はよく出来ていて可能性を感じるので、今後もガシガシ使っていきたいと思う。
