Android WebView 總結 —— 使用HTML5播放視頻及全屏方案

時間 2019-11-07

標籤 android webview 總結使用 html5 html 播放視頻全屏方案欄目 Android 简体版

原文原文鏈接

在APP開發的過程當中，會碰到須要在WebView中播放視頻的需求，下面講解一下如何在WebView中使用html5播放視頻。html

1.讓視頻在各個Android版本可以正常播放

在AndroidManifest.xml中聲明HardwareAccelerate的標誌，通常是添加在Activity的級別上。代碼以下：

<activity ... android:hardwareAccelerated="true" >

下面引伸一下HardwareAccelerate聲明的方式：html5

(a).若是須要聲明整個應用都要加速，則在Application級別下面進行聲明：android

< application ... android:hardwareAccelerated ="true">

(b).若是須要某個Activity加速，則能夠進行下面的聲明：web

<activity ... android:hardwareAccelerated="true" >

或者在代碼裏面進行動態的聲明：緩存

getWindow.setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

(c).若是Application和Activity都聲明瞭HardwareAccelerate，可是因爲某些特殊緣由，一些View不須要硬件加速，那麼在View裏面設置：app

view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

完成聲明操做後，基本上WebView就可以很好的支持在頁面上播放視頻了，下面展現的是在Html上的Viedeo的聲明方法：ide

<!DOCTYPE html>
<html>
    <body>
        <video width="305" height="305" controls="controls" preload="none" poster="http://****.png" >
              <source src="http://*****.mp4" type="video/mp4">
        </video>
    </body>
</html>

2. 視頻播放的時候可以全屏

視頻能播放，那麼如何支持視頻全屏播放呢？下面是針對全屏播放網頁視頻提供的解決辦法：post

public class WebVideoActivity extends Activity { private WebView webView; /** 視頻全屏參數 */
    protected static final FrameLayout.LayoutParams COVER_SCREEN_PARAMS = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); private View customView; private FrameLayout fullscreenContainer; private WebChromeClient.CustomViewCallback customViewCallback; @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); setContentView(R.layout.activity_xx); webView = (WebView) findViewById(R.id.xx); initWebView(); } @Override protected void onStop() { super.onStop(); webView.reload(); } /** 展現網頁界面 **/
　　public void initWebView() { WebChromeClient wvcc = new WebChromeClient(); WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setUseWideViewPort(true); // 關鍵點
        webSettings.setAllowFileAccess(true); // 容許訪問文件
        webSettings.setSupportZoom(true); // 支持縮放
        webSettings.setLoadWithOverviewMode(true); webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不加載緩存內容
 webView.setWebChromeClient(wvcc); WebViewClient wvc = new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { webView.loadUrl(url); return true; } }; webView.setWebViewClient(wvc); webView.setWebChromeClient(new WebChromeClient() { /*** 視頻播放相關的方法 **/ @Override public View getVideoLoadingProgressView() { FrameLayout frameLayout = new FrameLayout(WebVideoActivity.this); frameLayout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); return frameLayout; } @Override public void onShowCustomView(View view, CustomViewCallback callback) { showCustomView(view, callback); } @Override public void onHideCustomView() { hideCustomView(); } }); // 加載Web地址
 webView.loadUrl(webUrl); } /** 視頻播放全屏 **/
    private void showCustomView(View view, CustomViewCallback callback) { // if a view already exists then immediately terminate the new one
        if (customView != null) { callback.onCustomViewHidden(); return; } WebVideoActivity.this.getWindow().getDecorView(); FrameLayout decor = (FrameLayout) getWindow().getDecorView(); fullscreenContainer = new FullscreenHolder(WebVideoActivity.this); fullscreenContainer.addView(view, COVER_SCREEN_PARAMS); decor.addView(fullscreenContainer, COVER_SCREEN_PARAMS); customView = view; setStatusBarVisibility(false); customViewCallback = callback; } /** 隱藏視頻全屏 */
    private void hideCustomView() { if (customView == null) { return; } setStatusBarVisibility(true); FrameLayout decor = (FrameLayout) getWindow().getDecorView(); decor.removeView(fullscreenContainer); fullscreenContainer = null; customView = null; customViewCallback.onCustomViewHidden(); webView.setVisibility(View.VISIBLE); } /** 全屏容器界面 */
    static class FullscreenHolder extends FrameLayout { public FullscreenHolder(Context ctx) { super(ctx); setBackgroundColor(ctx.getResources().getColor(android.R.color.black)); } @Override public boolean onTouchEvent(MotionEvent evt) { return true; } } private void setStatusBarVisibility(boolean visible) { int flag = visible ? 0 : WindowManager.LayoutParams.FLAG_FULLSCREEN; getWindow().setFlags(flag, WindowManager.LayoutParams.FLAG_FULLSCREEN); } @Override public boolean onKeyUp(int keyCode, KeyEvent event) { switch (keyCode) { case KeyEvent.KEYCODE_BACK: /** 回退鍵 事件處理 優先級:視頻播放全屏-網頁回退-關閉頁面 */
            if (customView != null) { hideCustomView(); } else if (webView.canGoBack()) { webView.goBack(); } else { finish(); } return true; default: return super.onKeyUp(keyCode, event); } } }