在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放回来。

Android WebView 总结 —— 使用HTML5播放视频及全屏方案的更多相关文章

  1. CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug

    如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...

  2. 不完全解决Android微信HTML5 播放视频的问题(不显示控制条，可交互)

    首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有 ...

  3. 如何禁止 iPhone Safari video标签视频自动全屏？

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  4. 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  5. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  6. 阻止 iPhone 视频自动全屏

    最近一年都在做直播,遭video 全屏的问题困扰了很久.下面将阻止 ios视频自动全屏的办法写出来.添加 playsinline 和 webkit-playsinline="true&quo ...

  7. 可嵌入图片视频jQuery全屏滑块

    分享一款可嵌入图片视频jQuery全屏滑块.这是一款可定制的滑块幻灯片代码,支持键盘箭头切换.效果图如下: 在线预览   源码下载 实现的代码. html代码:     <script type ...

  8. Chrome浏览器中使用 iframe 嵌入网页导致视频不能全屏的问题解决方法

    今天无意中测试了下在 iframe 中嵌入视频, 发现全屏按钮在 Chrome 浏览器中居然无效, 试了好几个视频网站的视频都不能全屏, 但在其他浏览器中似乎都很正常, 应该是 Chrome 60 新 ...

  9. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

随机推荐

  1. ReStart

    ACM开始了?……重新启用Blog~

  2. TortoiseSVN客户端使用说明

    TortoiseSVN客户端使用说明 TortoiseSVN不是一个独立的窗口程序,而是集成在windows右键菜单中,下面对TortoiseSVN的菜单项做简要的说明.01.SVN Checkout ...

  3. 基于VC的ACM音频编程接口压缩Wave音频（三）

    (三)音 频 数 据 的 压 缩 下 面 说 明 使 用 CODEC 实 现 音 频 压 缩 的 过 程:假 设 源 信 号 为8K 采 样.16bits PCM 编 码. 单 声 道. 长 度 为1 ...

  4. 使用Excel对象模型在Excel单元格中设置不同的字体

    效果是这样的: 首先找到这个单元格或区域Range cell,然后代码: ((Range)cell). Characters[, ].Font.Color = Color.Blue; ((Range) ...

  5. yii2 mpdf

    安装 php composer.phar require kartik-v/yii2-mpdf "*" 或者把 "kartik-v/yii2-mpdf": &q ...

  6. js php json

    js端生成json函数 function json_encode_js(aaa){ function je(str){ var a=[],i=0; var pcs="abcdefghijkl ...

  7. 关于STM32-MDK中preprocessor symbols解释

    preprocessor symbols 是预处理符号的意思,这里相当于宏定义,我们在使用STM32固件库时,由于固件库里面包含的是ST整个系列单片机的定义,如下图 这时在define框中可以作为一个 ...

  8. [leetcode 48] rotate image

    1 题目 You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwi ...

  9. React Native移动框架功能研究

    React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...

  10. [后端人员耍前端系列]KnockoutJs篇：使用WebApi+Bootstrap+KnockoutJs打造单页面程序

    一.前言 在前一个专题快速介绍了KnockoutJs相关知识点,也写了一些简单例子,希望通过这些例子大家可以快速入门KnockoutJs.为了让大家可以清楚地看到KnockoutJs在实际项目中的应用 ...