Kuwapp's Blog

Android と Flutter やってます

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);
}

参考 http://stackoverflow.com/questions/15946183/android-webview-html5-video-autoplay-not-working-on-android-4-0-3

controls属性を指定したときに表示されるUIにフルスクリーンボタンがない

なぜか再生ボタン・シークバー・経過時間・音のONOFFしか表示されませんでした。
WebChromeClientを継承したクラスにonShowCustomViewonHideCustomViewをオーバライドさせてそれを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>