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

mac2025-02-18 9

转载请注明出处 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(); //初始化webview setUpWebViewDefaults(mWebView); //设置settings setChromeClient(); //设置chromeClient mWebView.loadUrl("file:///android_asset/www/index.html"); 1 2 3 4 大功告成

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

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

// 1. Stash the current state mCustomView = view; mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility(); mOriginalOrientation = getRequestedOrientation();

// 2. Stash the custom view callback mCustomViewCallback = callback;

@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

如果不想看源码直接安装demo 下载 http://download.csdn.net/download/u014513456/10220266

最新回复(0)