Android WebView播放视频并支持全屏

1. 前言

支持视频在线播放的网页随处可见，前端开发不需要做太多的工作就可以实现大多数需求。因为播放视频的具体功能是由浏览器核心在处理的。我以为Android的WebView应该是默认支持视频播放的，不会有太大的问题，但是经过测试后，还是发现了不少坑。主要有两个：

• 有些手机，无法正常播放视频，出现白屏或者只有声音没有画面等
• 视频无法全屏播放

2. 解决方案

2.1 正常播放视频

开启硬件加速，在 AndroidManifest.xml 中声明 HardwareAccelerate 属性，可在 application、activity 或代码中设置（任意选一种方式设置就行了）。

// 在application中


// 在activity中


// 在代码中
getWindow.setFlags(WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,
WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);

2.2 全屏播放

重写WebView的 WebChromeClient 的 onShowCustomView() 和 onHideCustomView() 方法就可以了。大概思路是：在 onShowCustomView() 中隐藏 WebView，并将得到的 View 添加到 FrameLayout 中显示，同时切换回横屏。在 onHideCustomView() 中隐藏 View，显示 WebView，同时切换回竖屏（是否切换回竖屏，请根据实际需求决定，我提供的demo是不切换回竖屏的）。主要代码如下：

mWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        // 进入视频全屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); // 横屏
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        mLlWeb.setVisibility(View.GONE);
        mFlVideoContainer.setVisibility(View.VISIBLE);
        mFlVideoContainer.addView(view);
        mIsShowVideo = true;
        super.onShowCustomView(view, callback);
    }

    @Override
    public void onHideCustomView() {
        // 退出视频全屏
        //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); // 竖屏
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED); // 默认值，系统根据方向感应自动选择屏幕方向
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        mLlWeb.setVisibility(View.VISIBLE);
        mFlVideoContainer.setVisibility(View.GONE);
        mFlVideoContainer.removeAllViews();
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                // 点击手机返回键的话，会同时调用onKeyDown和onHideCustomView
                // 为了避免同时执行退出全屏和返回上一个网页这两个操作的情况出现，要延迟修改mIsShowVideo的值
                mIsShowVideo = false;
            }
         }, 800);
         super.onHideCustomView();
    }
});

完整的demo可以查看 AndroidWebView。

 

如果想进一步交流和学习的同学，可以加一下QQ群哦！