WebViewでvideoタグのページを閲覧する

現在HTML5関連のお勉強をしています。
スマートフォンの端末やブラウザソフト毎に対応がバラバラなのがネックですね…。
というわけで、今回の話題はHTML5から動画ファイルの再生を容易にしたvideoタグについて。

ためしに
 <video width="***" height="***" autoplay loop>
 <source src="../movie/movie.mp4"></source>
 <source src="../movie/movie.webm"></source>
 </video>
こんな感じのタグを埋め込んだHTMLファイルをサーバに置き、
Android端末から色々なブラウザで閲覧してみました。

Android(docomo　GalaxyNexus　OS_4.1.1)
 ・Android標準ブラウザ　4.1.1　⇒　○　
 ・FireFox　17.0　⇒　○
 ・Chrome　18.0.1025464　⇒　○
オプションの有効無効などの多少の差異はありましたが
ブラウザアプリを立ち上げて見る分には問題無い事を確認。


…で、問題が、AndroidのWebView、でした。


AndroidのWebViewでVideoタグを見ようとすると、
プレイヤーは表示されるのですが再生ボタンを押しても何も表示されない。
カーソルだけが動く、でもそのカーソルも操作しようとすると
謎の挙動を起こす、そして表示は相変わらず何も起こらない。
そんな感じでした。

そんな馬鹿な!!と、なんとかAndroidWebViewでvideoタグを閲覧する方法をググらせて頂くと
ちゃーんと用意してくださっている方がいらっしゃる。ありがたやありがたや…
⇒http://code.google.com/p/html5webview/
（http://www.tandroid.org/html5webview）

1.ココの
 「Source」タブに記載されているリポジトリからSVNを用いてソースコードを頂く
 ソースコードはhtml5WebViewを用いたサンプルプロジェクトになっている

2.自分のプロジェクトを作成するなりなんなりする
 忘れない内にAndroidManifest.xmlファイルにInternetのパーミッションを指定しておく

3.先程頂いたプロジェクトファイルから複製する
 ・srcの…HTML5WebView.java
 ・リソースフォルダの…
  drawable/default_video_poster.png
  layout/custom_screen.xmlとvideo_loading_progress.xml
  value/colors.xmlとstrings.xml（既に作成されていたらマージする）

4.あとはWebViewを用いるところをHTML5WebViewで作成する
 HTML5WebViewインスタンスの生成はこんな感じで
 HTML5WebView webView　⇒　webView = new HTML5WebView(this)
 （基本サンプル様のやり方をまねればOK!!）

これで動く…はず!!


おまけ：
 上記の方法で普通は動くけれども、
 私の場合はおまけで以下のようなエラーが発生したのでメモです。

Caused by: java.lang.IllegalStateException: The specified child already has a parent.
You must call removeView() on the child's parent first.

HTML5WebViewインスタンスをLinearLayoutに埋め込もうとしたのですが
当のHTML5WebViewインスタンスが
「既に親のオブジェクトを持ってしまっているので、
指定のオブジェクト(今回の場合はLinearLayout)を親にする事が出来ません。
現在の親オブジェクトの指定を取り除いてください」という事らしいです。

ViewGroup parent = (ViewGroup)webView.getParent(); 
if ( parent != null ) { //webViewの親グループを削除しておく
parent.removeView(webView);
}

こんな感じに親オブジェクト(グループ)を削除。
無事、指定のLinearLayoutにaddView()で挿入する事ができましたｖ
(参照サイト様：http://d.hatena.ne.jp/Kazzz/20100603/p1)