WebView实现视频全屏播放_webview_97104.aok.1

功能描述

在网页加载中，通常使用小窗口嵌套在网页中播放视频，点击全屏按钮进入全屏播放，再点击返回或小窗口按钮退出全屏。

技术支持

WebView对全屏播放提供了支持。为了支持全屏（视频或HTML内容），需要设置WebChromeClient并实现onShowCustomView(View, WebChromeClient.CustomViewCallback) 和onHideCustomView()。如果缺少这两种方法中的任何一种，那么Web内容将不允许进入全屏。这是功能实现的关键。
注：为了支持应用程序中内嵌HTML5视频，需要打开硬件加速。

具体实现

在manifest文件中添加权限

<uses-permission android:name="android.permission.INTERNET"/>
1

给activity添加配置

android:configChanges="orientation|keyboardHidden|navigation|screenSize"
//添加上述配置后，在activity切换横竖屏的时候不会重新调用activity的生命周期，这很重要。
1
2

布局文件

布局文件中除webview，还需要添加一个视图来承载全屏的播放界面（也可动态加入）。如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.cbg.testwebview.MainActivity">

    <FrameLayout
        android:id="@+id/full_video"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone"></FrameLayout>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</FrameLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

根据自己的需求制定界面。上述布局文件中将会使用一个FrameLayout（full_video）来承载全屏播放的视图。

继承WebChromeClient，重写onHideCustomView和onShowCustomView方法
onShowCustomView为进入全屏，onHideCustomView退出全屏。代码如下：

private class MyWebChromeClient extends WebChromeClient{

    @Override
    public void onHideCustomView() {
        //退出全屏
        if (customView == null){
            return;
        }
        //移除全屏视图并隐藏
        fullVideo.removeView(customView);
        fullVideo.setVisibility(View.GONE);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);//设置竖屏
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);//清除全屏

    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        //进入全屏
        customView = view;
        fullVideo.setVisibility(View.VISIBLE);
        fullVideo.addView(customView);
        fullVideo.bringToFront();
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);//设置横屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

给WebView设置WebChromeClient

webView.setWebViewClient(new MyWebChromeClient());
1

详细源码请见GitHub:TestWebView