Android WebView Video完全详解（第一篇）-Android开发人员

来源：互联网发布：前端dns优化编辑：程序博客网时间：2024/06/05 20:53

转载请注明出处
http://blog.csdn.net/u014513456/article/details/54381361
Author：ruanjianjiagou@163.com

背景
最近公司某项功能需要WebView加载H5的Video，搜索很多资料后发现很多问题，都是关键代码片段，因为每个项目每个人产生的问题不同，Video在webview中加载不出来原因很多，可能是客户端少了参数，也可能是前端出了问题，经过研究后对Android WebView 加载H5Video标签做此详解。

前端人员需要操作事项传送门
Android WebView Video完全详解（第二篇）-H5前端开发人员
http://blog.csdn.net/u014513456/article/details/54381527

需要注意的几个点

video 播放有两种状态，在原来组件的位置直接播放，全屏播放。
IOS客户端对H5 Video标签做了特殊处理，即H5直接用video标签即可，但是Android客户端需要特殊JS处理，所以前端开发需要注意，在下面代码段会划重点。
AndroidManifest.xml中Activity需要开加速，需要全屏设置需要设置configChanges
Video可以在Fragment中或者Activity中，但多个Fragment中共用一个Activity如果全屏播放建议考虑横屏时生命周期，如果单开Activity加载WebView会更加清爽。

Anroid 客户端画重点

settings相关的设置

@TargetApi(Build.VERSION_CODES.HONEYCOMB)    private void setUpWebViewDefaults(WebView webView) {        WebSettings settings = webView.getSettings();        // Enable Javascript        settings.setJavaScriptEnabled(true);        // Use WideViewport and Zoom out if there is no viewport defined        settings.setUseWideViewPort(true);        settings.setLoadWithOverviewMode(true);        // Enable pinch to zoom without the zoom buttons        settings.setBuiltInZoomControls(false);        // Allow use of Local Storage        settings.setDomStorageEnabled(true);        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {            // Hide the zoom controls for HONEYCOMB+            settings.setDisplayZoomControls(false);        }        // Enable remote debugging via chrome://inspect        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            WebView.setWebContentsDebuggingEnabled(true);        }        webView.setWebViewClient(new WebViewClient());    }

WebChromeClient 相关设置

 void setChromeClient() {        mWebView.setWebChromeClient(new WebChromeClient() {            @Override            public Bitmap getDefaultVideoPoster() {                if (this == null) {                    return null;                }                //这个地方是加载h5的视频列表 默认图   点击前的视频图                return BitmapFactory.decodeResource(getApplicationContext().getResources(),                        R.mipmap.ic_launcher);            }            @Override            public void onShowCustomView(View view,                                         WebChromeClient.CustomViewCallback callback) {                // if a view already exists then immediately terminate the new one                if (mCustomView != null) {                    onHideCustomView();                    return;                }                // 1. Stash the current state                mCustomView = view;                mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();                mOriginalOrientation = getRequestedOrientation();                // 2. Stash the custom view callback                mCustomViewCallback = callback;                // 3. Add the custom view to the view hierarchy                FrameLayout decor = (FrameLayout) getWindow().getDecorView();                decor.addView(mCustomView, new FrameLayout.LayoutParams(                        ViewGroup.LayoutParams.MATCH_PARENT,                        ViewGroup.LayoutParams.MATCH_PARENT));                // 4. Change the state of the window                getWindow().getDecorView().setSystemUiVisibility(                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE |                                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |                                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |                                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |                                View.SYSTEM_UI_FLAG_FULLSCREEN |                                View.SYSTEM_UI_FLAG_IMMERSIVE);                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);            }            @Override            public void onHideCustomView() {                // 1. Remove the custom view                FrameLayout decor = (FrameLayout) getWindow().getDecorView();                decor.removeView(mCustomView);                mCustomView = null;                // 2. Restore the state to it's original form                getWindow().getDecorView()                        .setSystemUiVisibility(mOriginalSystemUiVisibility);                setRequestedOrientation(mOriginalOrientation);                // 3. Call the custom view callback                mCustomViewCallback.onCustomViewHidden();                mCustomViewCallback = null;            }        });    }

如果是Activity中就三步走

initView(); //初始化webviewsetUpWebViewDefaults(mWebView); //设置settingssetChromeClient(); //设置chromeClientmWebView.loadUrl("file:///android_asset/www/index.html");

大功告成
这里写图片描述

是啊只给代码段，我怎么知道往哪里拼~~~~
我喜欢直接拷贝啦~
走你~

package open.ppdai.com.webviewh5video;import android.annotation.TargetApi;import android.app.Activity;import android.content.pm.ActivityInfo;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.os.Build;import android.os.Bundle;import android.os.Handler;import android.view.View;import android.view.ViewGroup;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import android.widget.FrameLayout;/** * Email:ruanjianjiagou@163.com * * @data:17/1/12 上午11:16 * @Description:${todo} * */public class MainActivity extends Activity {    private WebView mWebView;    private View mCustomView;    private int mOriginalSystemUiVisibility;    private int mOriginalOrientation;    private WebChromeClient.CustomViewCallback mCustomViewCallback;    protected FrameLayout mFullscreenContainer;    private Handler mHandler;    public MainActivity() {        mHandler = new Handler();    }    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        initView();        setUpWebViewDefaults(mWebView);        setChromeClient();     mWebView.loadUrl("file:///android_asset/www/index.html"); //这个地方是本地的assets下的h5文件//android开发人员直接拿这个标准的文件去看是否能从当前页面播放，是否能全屏播放    }    private void initView() {        mWebView = (WebView) findViewById(R.id.webview);    }    void setChromeClient() {        mWebView.setWebChromeClient(new WebChromeClient() {            @Override            public Bitmap getDefaultVideoPoster() {                if (this == null) {                    return null;                }                //这个地方是加载h5的视频列表 默认图   点击前的视频图                return BitmapFactory.decodeResource(getApplicationContext().getResources(),                        R.mipmap.ic_launcher);            }            @Override            public void onShowCustomView(View view,                                         WebChromeClient.CustomViewCallback callback) {                // if a view already exists then immediately terminate the new one                if (mCustomView != null) {                    onHideCustomView();                    return;                }                // 1. Stash the current state                mCustomView = view;                mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();                mOriginalOrientation = getRequestedOrientation();                // 2. Stash the custom view callback                mCustomViewCallback = callback;                // 3. Add the custom view to the view hierarchy                FrameLayout decor = (FrameLayout) getWindow().getDecorView();                decor.addView(mCustomView, new FrameLayout.LayoutParams(                        ViewGroup.LayoutParams.MATCH_PARENT,                        ViewGroup.LayoutParams.MATCH_PARENT));                // 4. Change the state of the window                getWindow().getDecorView().setSystemUiVisibility(                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE |                                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |                                View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |                                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |                                View.SYSTEM_UI_FLAG_FULLSCREEN |                                View.SYSTEM_UI_FLAG_IMMERSIVE);                setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);            }            @Override            public void onHideCustomView() {                // 1. Remove the custom view                FrameLayout decor = (FrameLayout) getWindow().getDecorView();                decor.removeView(mCustomView);                mCustomView = null;                // 2. Restore the state to it's original form                getWindow().getDecorView()                        .setSystemUiVisibility(mOriginalSystemUiVisibility);                setRequestedOrientation(mOriginalOrientation);                // 3. Call the custom view callback                mCustomViewCallback.onCustomViewHidden();                mCustomViewCallback = null;            }        });    }    @TargetApi(Build.VERSION_CODES.HONEYCOMB)    private void setUpWebViewDefaults(WebView webView) {        WebSettings settings = webView.getSettings();        // Enable Javascript        settings.setJavaScriptEnabled(true);        // Use WideViewport and Zoom out if there is no viewport defined        settings.setUseWideViewPort(true);        settings.setLoadWithOverviewMode(true);        // Enable pinch to zoom without the zoom buttons        settings.setBuiltInZoomControls(false);        // Allow use of Local Storage        settings.setDomStorageEnabled(true);        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.HONEYCOMB) {            // Hide the zoom controls for HONEYCOMB+            settings.setDisplayZoomControls(false);        }        // Enable remote debugging via chrome://inspect        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {            WebView.setWebContentsDebuggingEnabled(true);        }        webView.setWebViewClient(new WebViewClient());    }}

布局文件里面就一个webview 如果不想写直接去下载代码唠~

看到这里，如果你的webview还是没有加载出Video来，那你直接把这这个demo运行结果扔给前端，并且把第二篇文章给前端人员看好了

这里写图片描述

戳我下载demo 直接改下load的url就能测试下前端代码唠~~
戳戳戳~戳走bug~
http://download.csdn.net/download/u014513456/9736220

0 0