初めまして、河村です。
これからしばらくはスマートフォンのwebアプリに関することを記事にしていこうかなと思っています。
webアプリといっても、単にjavascriptでサーバとajaxでやり取りした結果を出すだけ、というところに留まらず、css3やhtml5を積極的に取り入れていこうと思っていますので乞うご期待。
初回である今回は、スマートフォンやタブレットでhtml5のvideoタグを扱う案件の中から、ポイントだけを抜き出してお話したいと思います。
今回扱うプラットフォームはiOS4.2以上のiPhone（Androidデバイスは持ち前がないので検証はまたの機会に）、確認のためのPC版safari5。
まずやりたいこととしては、
「ページがロードされたらvideoで指定されているmovieを自動的に再生したい」
というのがあります。
しかしこれがまた単純に自動再生できない。例えば以下のソース。
[ccel_html]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>autoplay test0</title>
</head>
<body>
<video id=”myvideo”
src=”（動画ファイルへのリンク）”
controls
autobuffer
autoplay>
</video>
</body>
</html>
[/ccel_html]
適当にコピペ、リンクを修正して動作確認してみてください。すると以下の結果を得られるはずです。
- iOS – 動作しない
- safari – 動作する
さぁ困った。
そこで色々調べて回ったところ、以下を発見しました。
ユーザアクションでの再生しか許可しない。
（参考）
本家（developer.apple.com）
Safariだとaudio/videoタグのautoplay, autobuffer属性が効かない
それって致命的と思いながらも確認用ソースを作成。今回はonloadで試します。
[ccel_javascript]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>autoplay test1</title>
<script type=”text/javascript”>
function trigger() {
var video = document.getElementById(‘myvideo’);
video.load();
video.play();
}
</script>
</head>
<body onload=”trigger()”>
<video id=”myvideo”
src=”（動画ファイルへのリンク）”
controls
autobuffer
autoplay>
</video>
</body>
</html>
[/ccel_javascript]
すると、
- iPhone – 動作しない
- safari – 動作する
iOSは予想通りダメですね。
次に
「ユーザ操作でvideoタグをDOMに挿入してmovieを自動的に再生したい」
です。
以下がサンプルソース。
[ccel_javascript]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>autoplay test2</title>
<script type=”text/javascript”>
function init() {
var b = document.getElementById(‘button’);
b.addEventListener(‘click’, function() {
// 1回だけ動作させる
b.removeEventListener(‘click’, arguments.callee, false);
trigger();
}, false);
}
function trigger() {
var video = document.createElement(‘video’);
video.setAttribute(‘myvideo’);
video.src = ‘（動画ファイルへのリンク）’
video.controls = true;
video.autoplay = true;
video.autobuffer = true;
document.body.appendChild(video);
video.load();
video.play();
}
</script>
</head>
<body onload=”init()”>
<input type=”button” id=”button” value=”video play”>
</body>
</html>
[/ccel_javascript]
結果は以下。
- iPhone – 動作する
- safari – 動作する
ユーザアクションが起点となっていれば、DOM操作後のvideoに対する操作も可能である、と。
なるほど、ではちょっと嫌がらせをしてみましょう。
[ccel_javascript]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>autoplay test2</title>
<script type=”text/javascript”>
function init() {
var b = document.getElementById(‘button’);
b.addEventListener(‘click’, function() {
// 1回だけ動作させる
b.removeEventListener(‘click’, arguments.callee, false);
// ここにtimeoutを仕込んでみる
window.setTimeout(function() {
trigger();
}, 100);
}, false);
}
function trigger() {
var video = document.createElement(‘video’);
video.setAttribute(‘myvideo’);
video.src = ‘（動画ファイルへのリンク）’;
video.controls = true;
video.autoplay = true;
video.autobuffer = true;
document.body.appendChild(video);
video.load();
video.play();
}
</script>
</head>
<body onload=”init()”>
<input type=”button” id=”button” value=”video play”>
</body>
</html>
[/ccel_javascript]
結果は以下。
- iPhone – 動作しない
- safari – 動作する
ユーザアクションから切り離されたことを、mobile safariはちゃんと認識しています。
なぜこんなことをしたかというと、これが今回のプロジェクトで必要な処理だったから、の一言です（笑）。
まとめ
iPhone、Android（今回は検証を行いませんでしたがww）などの次世代デバイスは進化の途中であり、それゆえにまだ色々な制限が存在します。
普通にできること、どうにかすればできること、仕様上できないことなどを整理しながら、新しいことに取り組んでいこうと思います。
次回は…Androidの検証か、css3周りのお話でもしようと思います。
ピンバック: google closure compiler | SpiriteK Blog
ピンバック: iPhone Safariではユーザーアクションきっかけでないと音を再生できないっぽい | programming design