摘要：今天來介紹一種簡單易行粗暴的方式來實現的視頻全屏播放。通過在一些主流視頻網站上的測試，在愛奇藝，土豆，芒果，等可正常全屏，在騰訊，樂視，等網站仍然無法全屏。經測試，騰訊和沒有問題了，樂視和仍然不可以全屏，即使已經找到了全屏按鈕的標識。

　　用過WebView的開發者們肯定都知道這里面的坑數不勝數，加載緩慢，內存泄露，文件選擇......沒錯，全屏播放視頻，這又是一個大坑。一個沒有修飾過的原生WebView幾乎不可能在某一個主流視頻網站實現全屏播放，倘若在客戶端自己實現簡單的播放器，鏈接拿過來，擺個VideoView，想怎么全屏怎么全屏，放在WebView上，一切就悲劇了，大多數情況下點擊全屏按鈕是沒有反應的，或者無法實現橫屏全屏。今天來介紹一種簡單易行粗暴的方式來實現WebView的視頻全屏播放。

　　當你無從下手的時候，照例先看一下官方文檔，很多常見的問題官方文檔都給我們提供思路。你會發現下面這樣一段話，

　　應用如果需要支持HTML5的video標簽，必須打開硬件加速。我們只需要在Application標簽或者相應Activity標簽下添加android:hardwareAccelerated="true"即可。接著為了支持全屏，需要重寫WebChromeClient的onShowCustomView()和onHideCustomView()方法，這兩個方法缺一不可。先來看一下onShowCustomView（）:

　　當前頁面進入全屏模式的時候會調用這個方法，并且返回了兩個參數。第一個是我們要在全屏模式時顯示的View，第二個是一個CustomViewCallBack接口，可以調用這個接口請求關閉全屏模式。再看一下onHideCustomView()方法：

　　通知應用當前頁面已經關閉全屏模式，我們需要做的操作是隱藏之前onSHowCustomView()方法中取到的View。了解這兩個方法之后，我們就可以進行一些操作來實現簡單的全屏播放了。布局文件中我們增加一個和WebView同層級的Framelayout，如下所示：

　　在Activity中實現自定義的WebChromeClient，在onShowCustomView中橫屏，隱藏WebView,并將得到的View添加到FrameLayout中顯示。在onHideCustomView中隱藏View，顯示WebView，并豎屏，代碼如下：

` private class CustomWebViewChromeClient extends WebChromeClient{

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        fullScreen();
        mWebView.setVisibility(View.GONE);
        mVideoContainer.setVisibility(View.VISIBLE);
        mVideoContainer.addView(view);
        mCallBack=callback;
        super.onShowCustomView(view, callback);
    }

    @Override
    public void onHideCustomView() {
        fullScreen();
        if (mCallBack!=null){
            mCallBack.onCustomViewHidden();
        }
        mWebView.setVisibility(View.VISIBLE);
        mVideoContainer.removeAllViews();
        mVideoContainer.setVisibility(View.GONE);
        super.onHideCustomView();
    }
}

private void fullScreen() {
    if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT) {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    } else {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }
}`

　　最后別忘記處理屏幕旋轉，否則橫豎屏切換會重新走一遍生命周期。通過在一些主流視頻網站上的測試，在愛奇藝，土豆，芒果TV，PPTV等可正常全屏，在騰訊，樂視，BiliBili,Acfun等網站仍然無法全屏。通過日志我們可以發現，根本沒有回調onShowCustomView這個方法，所以沒有執行相應代碼。原因暫時還不得而知，有小伙伴了解的可以溝通一下。那么如何得到用戶點擊全屏按鈕的事件呢，既然是一個html頁面，java語言可以操作的東西就不多了，JavaScript就可以大顯身手了。通過向頁面注入一些js語句我們可以做很多事情，只需要知道全屏按鈕的Class標識，就可以通過js，當用戶點擊全屏按鈕的時候調用我們本地方法，具體代碼如下：

"javascript:document.getElementsByClassName("" + tag + "")[0].addEventListener("click",function(){onClick.fullscreen();return false;});"

　　tag是Class標識，onClick.fullscreen()是我自己本地定義的方法。那么如何注入這段js代碼呢？我們只需要重寫WebClient的onPageFinished()方法，如下所示：

private class CustomWebClient extends WebViewClient{

    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        String js=TagUtils.getJs(url);
        view.loadUrl(js);
    }
}

private class JsObject{

    @JavascriptInterface
    public void fullscreen(){
        //監聽到用戶點擊全屏按鈕
       fullScreen();
    }
}

mWebView.addJavascriptInterface(new JsObject(),"onClick");

　　這樣就可以實現上述幾個網站的全屏播放了。
經測試，騰訊和BiliBili沒有問題了，樂視和Acfun仍然不可以全屏，即使已經找到了全屏按鈕的Class標識。哪位大仙可以提供一個解釋。
下面給出一些我收集的幾個視頻網站的全屏按鈕Class標識：

public static String getTagByUrl(String url) {
    if (url.contains("qq")) {
        return "tvp_fullscreen_button"; // http://m.v.qq.com
    } else if (url.contains("youku")) {
        return "x-zoomin";              // http://www.youku.com
    } else if (url.contains("bilibili")) {
        return "icon-widescreen";       // http://www.bilibili.com/mobile/index.html
    } else if (url.contains("acfun")) {
        return "controller-btn-fullscreen"; //http://m.acfun.tv   無效
    } else if (url.contains("le")) {
        return "hv_ico_screen";         // http://m.le.com  無效
    }
    return "";
}

　　總結一下，正如文章題目所說，實現WebView全屏播放的一種方式，而且肯定不是主流的一種方式，僅僅只是一種比較簡單的方式。通過反編譯一些瀏覽器應用的apk，大多數是通過js獲取到當前頁面視頻的鏈接，用自定義的播放器來播放，這樣使得播放界面可以自定義，用戶體驗更好，當然，我也想過這種方法，可是已經跪在起點，如何獲得當前頁面視頻的播放地址。研究過的同學可以和我交流交流，不勝感激。

有任何疑問，歡迎加群討論：261386924