Android WebView Video完全详解（第一篇）-Android开发人员
需要注意的几个点
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");
大功告成
是啊只给代码段 ，我怎么知道往哪里拼~~~~
我喜欢直接拷贝啦~
走你~
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:[email protected]
*
* @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());
}
}