zoukankan      html  css  js  c++  java
  • Android WebView 总结 —— 使用HTML5播放视频及全屏方案

    在APP开发的过程中,会碰到需要在WebView中播放视频的需求,下面讲解一下如何在WebView中使用html5播放视频。

    1.让视频在各个Android版本能够正常播放

    在AndroidManifest.xml中声明HardwareAccelerate的标志,一般是添加在Activity的级别上。代码如下:
    <activity ... android:hardwareAccelerated="true" >

    下面引申一下HardwareAccelerate声明的方式:

    (a).如果需要声明整个应用都要加速,则在Application级别下面进行声明:

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

    (b).如果需要某个Activity加速,则可以进行下面的声明:

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

    或者在代码里面进行动态的声明:

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

    (c).如果Application和Activity都声明了HardwareAccelerate,但是由于某些特殊原因,一些View不需要硬件加速,那么在View里面设置:

    view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

    完成声明操作后,基本上WebView就能够很好的支持在页面上播放视频了,下面展示的是在Html上的Viedeo的声明方法:

    <!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. 视频播放的时候能够全屏

    视频能播放,那么如何支持视频全屏播放呢? 下面是针对全屏播放网页视频提供的解决办法:

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

    在onShowCustomView方法中,将获取到的view放到当前Activity的最上方,在onHideCustomView中,将之前的view隐藏或者删除,将原来被覆盖的webview放回来。

      

  • 相关阅读:
    [BFS]luogu P2536 [AHOI2005]病毒检测
    AtCoder Regular Contest 116 总结
    NOI online 2021 #1 总结
    博客半复活
    vue2 Bus兄弟组件间传值问题:重复触发和首次未触发
    ant design中table组件的filter,如何在外部控制
    ant design vue 日期排序
    什么是断点续传?前端如何实现文件的断点续传
    主vue前端面试题补充
    P4248 [AHOI2013]差异 题解
  • 原文地址:https://www.cnblogs.com/renhui/p/5893593.html
Copyright © 2011-2022 走看看