WebViewでHtml5のvideoタグを使ったときにはまったこと【Android】
動画関連のアプリを開発しているのですが、開発中にいくつかはまったので記事にします。
動作確認端末はNexus5でOSはAndroid5.1です。
他の端末やバージョンでは試していないのでどうなるか不明・・です。
もし情報あれば教えていただけると助かります。
autoplay属性を指定しても自動で再生されない
次のようにautoplay属性を指定しても自動で動画が再生されませんでした。
<video src="xxxx.mp4" width="320" height="240" autoplay controls></video>
対策としてloadstart時にplayを呼び出して再生するようにしました。
<video src="xxxx.mp4" width="320" height="240" autoplay controls></video> <script> var video = document.getElementsByTagName('video')[0]; video.addEventListener("loadstart", function(){video.play();}, false); </script>
ただ、これだけではなぜか動かずJava側でWebSettingsクラスのsetMediaPlaybackRequiresUserGesture
を呼び出すことで解決しました。
int SDK_INT = android.os.Build.VERSION.SDK_INT; if (SDK_INT > 16) { webView.getSettings().setMediaPlaybackRequiresUserGesture(false); }
controls属性を指定したときに表示されるUIにフルスクリーンボタンがない
なぜか再生ボタン・シークバー・経過時間・音のONOFFしか表示されませんでした。
WebChromeClientを継承したクラスにonShowCustomView
とonHideCustomView
をオーバライドさせてそれをsetWebChromeClient
でWebViewに設定すると表示されました。
webView.setWebChromeClient(new WebChromeClient() { @Override public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); } @Override public void onHideCustomView() { super.onHideCustomView(); } });
ただ自分の環境だとフルスクリーンボタンは表示されますが、フルスクリーンになりませんでした。
解決策は次へ。
フルスクリーンにならない
フルスクリーンボタンが押されるとWebChromeClientクラスのonShowCustomView
の第一引数にフルスクリーンの動画を貼ったviewが渡されてくるようです。
そのviewを自分でaddViewしなければならないみたい?
けっこう簡単に書いてますが、動画再生終了時の処理とか他にもいろいろ書く必要があると思います。
Githubに良さそうなリポジトリがあったのでそれ見ると良いかもしれません。
フルスクリーンボタンがなかったのはこれらをオーバーライドしてないのでフルスクリーンの動画を表示できなかったからなのかな。
webView.setWebChromeClient(new WebChromeClient() { private View mVideoView; @Override public void onShowCustomView(View view, CustomViewCallback callback) { super.onShowCustomView(view, callback); mVideoView = view; videoContainer.addView(mVideoView); } @Override public void onHideCustomView() { super.onHideCustomView(); videoContainer.removeView(mVideoView); mVideoView = null; } });
参考 https://github.com/cprcrack/VideoEnabledWebView
余白を消す
動画の再生とは関係ないですが、WebView内全体に収まるよう表示しているはずが余白があったのでcssでマージン0にすると解決しました。
<style type="text/css"> body { margin: 0px; } </style>