WebView Video Play - litonghui/TechBlog GitHub Wiki

通过WebView 加载H5 页面，如果遇到视频播放，需要注意一些问题

1. 网络切换到移动网络时候如何优雅的提示用户

1). 如果H5 为自己前端开发同学开发的，可以通过本地native 方法与 JS 方法通信，广播监听网络切换为移动网络状态，可以调用Js 提供方法，具体操作交个H5前端开发同学。

2). 如果H5 为第三方开发，需要通过查找标签的方法调用相应的video方法操作。具体如：

if (type == ConnectivityManager.TYPE_MOBILE){// 网络切换为移动网络调用该函数
    autoPause();
    new AlertDialog.Builder(mContext)
            .setTitle("提醒")
            .setMessage("网络切换为移动网络")
            .setPositiveButton(android.R.string.ok,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            autoPlay();
                        }
                    })
            .setNegativeButton(android.R.string.cancel,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            autoStop();
                        }
                    })
            .create()
            .show();
}

private void autoPause() {
    String js = "javascript: var el = document.getElementById('player');if (el) {var elv = el.getElementsByTagName('video')[0];"
            + "elv.pause(); }";
    mWebView.loadUrl(js);
}

private void autoPlay() {
    String js = "javascript: var el = document.getElementById('player');if (el) {var elv = el.getElementsByTagName('video')[0]; "
            + "elv.play(); }";
    mWebView.loadUrl(js);
}

private void autoStop() {
    String js = "javascript: var el = document.getElementById('player');if (el) {var elv = el.getElementsByTagName('video')[0];elv.load();elv.preload = 'none';elv.pause()}";
    mWebView.loadUrl(js);
}

补充解释，采用上述方法的原因，在调用网络切换弹窗时候想到了js 的重写 confirm() 和 alter()，但是测试放心当调用：mWebView.loadUrl(“javascript:confirm()”) ,如果视频已经播放会造成视频重新从头开始。不符合用户习惯，如果用户选择继续播放不能从当前位置接着播放。

3).有个想法希望在Webview打开页面后自动播放视频，出现如下问题，

  Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture

通过查找发现webview，发现webSettings 的 setMediaPlaybackRequiresUserGesture() 默认是true

/**
 * Sets whether the WebView requires a user gesture to play media.
 * The default is true.
 *
 * @param require whether the WebView requires a user gesture to play media
 */
public abstract void setMediaPlaybackRequiresUserGesture(boolean require);

解决方法：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        webSettings.setMediaPlaybackRequiresUserGesture(false);
}