audio、videoタグをスマホサイトで使う時に気をつけること

ちょっと前にスマホサイトで音声や動画を流す要件があり、
注意が必要な箇所があったのでメモ書き程度に残します。

使うのはHTML5で追加されたauido、videoタグです。
その名の通り、audioは音声ファイル、videoタグは動画ファイルを
Webサイト上で再生するためのタグになります。

タグ自体の説明はぐぐってもらうとして、
以下に気をつけるべき注意点を書いていきます。

preloadとload属性は無視されます。
PCではもちろん動作しますが、スマホでは無視です。
これちゃんと意味があって、勝手にロードされたら
課金されちゃうでしょ？っていう上での動きのようです。
言われてみれば確かにそうですね。。。

じゃ、いつロードされるのか？
jsで、ドキュメントロード後に

audio.load();

とかやってもダメです。
ロードされません。じゃ、いつやればいいの？ってことなんですが、
これはユーザアクションを受け取ったFunctionでしか出来ません。
例えば

$('#load').click(function(){
    audio.load();
});

って感じ。
必ずユーザ入力ありきでしかロードされません。
つまりなにかクリックとかの動作が必要ということです。
例えば、サイト表示時に

音声を再生しますか？
はい　いいえ

の選択肢を出して、「はい」を押したらロードするとか。

これもロード同様に、autoplayとか効きません。ロード同様に、

audio.play();

するためにはなんらかの入力が必要になります。
ただロードからの自動再生は出来ました。端末、OSに実装方法が異なりますが、autoplay属性をtrueにして
dataloadedイベント（or canplay）をハンドルして、そこからplay()することでいけます。

例えば、１画面でa.mp3とb.mp3というファイルを再生したい場合
iOS6で動作が不安定になりました。
音がロードされなかったり鳴らなかったり。。。
時には遅延がひどかったり。

これ、対策としては１音源のみをロードするようにして
再生位置、再生秒数を指定するような形で各音を再生するような形にしました。
１音源のみを読みこめば良いのでロード処理もシンプルになります。

iOSだけですが、BASIC認証かけてたりすると
poster属性の画像が表示されませんでした。

load -> playとするまで

display: none

としておき、load直前で

display: block

してたのですが、一部端末（Android）で
loadが正常に開始されない現象ありました。

なので、displayによる非表示はせずに画像を重ねて
見えないようにすることで対処しました。

思い出しながら書きましたが大きなところではこんなところかと思います。
サイトで音がでるのはあまりないかなと思いますが、
これから増えていくのかなーと思ってたりします。

特にloadとplayにユーザアクションが必要というのは
UIに関わってくるところでもあるので、ユーザさんが

「スマホサイトで音鳴らしたい！」

と言ったらそこを考慮しつつ設計するのがまず大事かと思います。

今回の案件でこの辺のノウハウ溜まったので、お仕事お待ちしております（・∀・）ﾆﾔﾆﾔ

yakisakeの日記