Hatena::ブログ(Diary)

azukinohirokiの日記

2012-01-13

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

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

Autoplay

html5で使えるようになった<video>タグで、webViewへ動画を簡単に載せることが出来ます。

  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

<video>タグにはautoplayという便利な属性があって、それを使えば自動で再生してくれるはず!
なのですが、iOS版のsafariではautoplayは無視されるように実装されているようです。
どうやら「ユーザが指示するまでは動きません」的なポリシーみたいです。
iOS-Specific Considerations

そうは言ってもクライアント(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の日記

KENZIKENZI 2012/02/16 09:57 すばらしいです!ぜひ試したいです。ちなみに、iphone上で、フルスクリーンさせない裏技はありませんか?

azukinohirokiazukinohiroki 2012/02/16 12:00 コメントありがとうございます!
html5のvideo要素で動画を再生する場合、iPhoneだとMPMoviePlayerControllerが自動で起動しているようなんですね。
これを掴めればと思って色々試したんですが上手くいかなくて…
お役に立てずすみません。。

KENZIKENZI 2012/02/16 12:39 たびたびすみません。
フルスクリーンは無理として、このスクリプトをHTML5に具体的に入れたソースを見たいのですが・・・。
出来れば、youtubeの動画を入れ込んだものがあると助かります。
どうも、うまくいかなくて・・・。
すみません。
お忙しい中とは思いますが、ぜひお助け頂ければ幸いです。
よろしくお願い申し上げます。

azukinohirokiazukinohiroki 2012/02/16 14:01 youtubeの動画は基本flashなので、そのまま埋め込むのは無理なんじゃないかなーと思います。
本家のスマートフォン向けサイトではhtml5で動いてるようなので、それを解析すればやり方が分かるかもしれませんが。。
動画本体のアドレスを特定しないといけないので厳しい気がします。。
動画を直リン出来るのであれば記事にあるようにUIWebViewにhtmlで書いたコードをロードしてあげれば再生出来るはずです。
あとは、
http://webdesignmatome.com/web-tips/video-player
すごく高機能なプレイヤーも混ざってますが、この辺を参考にするのもいいかもしれません。

KENZIKENZI 2012/02/16 15:20 ありがとうございます。
このプログラムは、HTML5単体では動かないものなのですね。
私の間違いでした。
ちなみに、通常のHTMLにyoutubeのembedを張り付ければ、youtubeの動画は見れます。
ただし、autoplayが出来なくて悩んでいたのです。
ありがとうございました。

azukinohirokiazukinohiroki 2012/02/16 16:11 あぁ、すみません、てっきりネイティブからの制御だとばかり思ってました。。
HTML5だけだと記事にある通りautoplayをsafariが無視しちゃうので厳しいですね。
javascriptが使えるのならばボタンクリックをエミュレートして再生開始出来るようですが。
http://logic.moo.jp/memo.php/archive/736

KENZIKENZI 2012/02/16 17:07 何度もご回答ありがとうございます。
お教え頂いたサイトを試してみたのですが、エラーでした。
ありがとうございました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/azukinohiroki/20120113/1326469430