iPhone/iPadのwebviewで動画を自動再生＆フルスクリーン化

iOS javascript html5

ブラウザのhtml5対応は日進月歩なので今のところ（iOS5.0）の挙動ということで。

Autoplay

html5で使えるようになった

  NSString *httpString = @"<video id='video' width='500' height='300' src='http://hoge.com/hoge.mp4' controls></video>";
  [webView loadHTMLString:httpString baseURL:nil];

controls属性を追加しておけば再生ボタンなんかもブラウザが勝手に用意してくれます。
便利。

ただ、どうしても（クライアントの無茶な要望などで）自動再生させたい時があります。
たとえそれが悪いことだと分かっていても。
Autoplay is bad for all users | Punkchip

そうは言ってもクライアントが(ry
というわけでwebViewのプロパティをいじります。
htmlをロードする前に

  [webView setMediaPlaybackRequiresUserAction:NO];

としてやればOKです。

フルスクリーン

iPhoneだと再生時に問答無用でフルスクリーンになるのですが、iPadの場合はブラウザ内で再生しようとします。
controls付けてれば最大化ボタンが表示されるけど、付けたくない場合やプログラムで制御したい時もあります。

その場合、動画が再生状態であればjavascriptを使って

  [webView stringByEvaluatingJavaScriptFromString:@"var v = document.getElementById('video');v.webkitEnterFullscreen();"];

フルスクリーンで再生が出来ます。
前述のautoplayと組み合わせればフルスクリーン再生させるようなプログラムが出来ます。

再生状態で無くてもフルスクリーンにしたいのですが。。
Controlling Media with JavaScript
ここ読むとmetadata読むまではダメっぽいこと書いてあったので、preload属性付けたりしてみたんですがダメでした…


今のところはこんな感じですが、ブラウザの対応状況が変わると使えなくなってしまうトピックかもですね。

※続編的なものも書きました！ 2012/1/16
再生終了時に何かする - azukinohirokiの日記