摘要：今天來(lái)介紹一種簡(jiǎn)單易行粗暴的方式來(lái)實(shí)現(xiàn)的視頻全屏播放。通過(guò)在一些主流視頻網(wǎng)站上的測(cè)試，在愛(ài)奇藝，土豆，芒果，等可正常全屏，在騰訊，樂(lè)視，等網(wǎng)站仍然無(wú)法全屏。經(jīng)測(cè)試，騰訊和沒(méi)有問(wèn)題了，樂(lè)視和仍然不可以全屏，即使已經(jīng)找到了全屏按鈕的標(biāo)識(shí)。

　　用過(guò)WebView的開(kāi)發(fā)者們肯定都知道這里面的坑數(shù)不勝數(shù)，加載緩慢，內(nèi)存泄露，文件選擇......沒(méi)錯(cuò)，全屏播放視頻，這又是一個(gè)大坑。一個(gè)沒(méi)有修飾過(guò)的原生WebView幾乎不可能在某一個(gè)主流視頻網(wǎng)站實(shí)現(xiàn)全屏播放，倘若在客戶端自己實(shí)現(xiàn)簡(jiǎn)單的播放器，鏈接拿過(guò)來(lái)，擺個(gè)VideoView，想怎么全屏怎么全屏，放在WebView上，一切就悲劇了，大多數(shù)情況下點(diǎn)擊全屏按鈕是沒(méi)有反應(yīng)的，或者無(wú)法實(shí)現(xiàn)橫屏全屏。今天來(lái)介紹一種簡(jiǎn)單易行粗暴的方式來(lái)實(shí)現(xiàn)WebView的視頻全屏播放。

　　當(dāng)你無(wú)從下手的時(shí)候，照例先看一下官方文檔，很多常見(jiàn)的問(wèn)題官方文檔都給我們提供思路。你會(huì)發(fā)現(xiàn)下面這樣一段話，

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

　　當(dāng)前頁(yè)面進(jìn)入全屏模式的時(shí)候會(huì)調(diào)用這個(gè)方法，并且返回了兩個(gè)參數(shù)。第一個(gè)是我們要在全屏模式時(shí)顯示的View，第二個(gè)是一個(gè)CustomViewCallBack接口，可以調(diào)用這個(gè)接口請(qǐng)求關(guān)閉全屏模式。再看一下onHideCustomView()方法：

　　通知應(yīng)用當(dāng)前頁(yè)面已經(jīng)關(guān)閉全屏模式，我們需要做的操作是隱藏之前onSHowCustomView()方法中取到的View。了解這兩個(gè)方法之后，我們就可以進(jìn)行一些操作來(lái)實(shí)現(xiàn)簡(jiǎn)單的全屏播放了。布局文件中我們?cè)黾右粋€(gè)和WebView同層級(jí)的Framelayout，如下所示：

　　在Activity中實(shí)現(xiàn)自定義的WebChromeClient，在onShowCustomView中橫屏，隱藏WebView,并將得到的View添加到FrameLayout中顯示。在onHideCustomView中隱藏View，顯示W(wǎng)ebView，并豎屏，代碼如下：

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

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

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

　　tag是Class標(biāo)識(shí)，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(){
        //監(jiān)聽(tīng)到用戶點(diǎn)擊全屏按鈕
       fullScreen();
    }
}

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

　　這樣就可以實(shí)現(xiàn)上述幾個(gè)網(wǎng)站的全屏播放了。
經(jīng)測(cè)試，騰訊和BiliBili沒(méi)有問(wèn)題了，樂(lè)視和Acfun仍然不可以全屏，即使已經(jīng)找到了全屏按鈕的Class標(biāo)識(shí)。哪位大仙可以提供一個(gè)解釋。
下面給出一些我收集的幾個(gè)視頻網(wǎng)站的全屏按鈕Class標(biāo)識(shí)：

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   無(wú)效
    } else if (url.contains("le")) {
        return "hv_ico_screen";         // http://m.le.com  無(wú)效
    }
    return "";
}

　　總結(jié)一下，正如文章題目所說(shuō)，實(shí)現(xiàn)WebView全屏播放的一種方式，而且肯定不是主流的一種方式，僅僅只是一種比較簡(jiǎn)單的方式。通過(guò)反編譯一些瀏覽器應(yīng)用的apk，大多數(shù)是通過(guò)js獲取到當(dāng)前頁(yè)面視頻的鏈接，用自定義的播放器來(lái)播放，這樣使得播放界面可以自定義，用戶體驗(yàn)更好，當(dāng)然，我也想過(guò)這種方法，可是已經(jīng)跪在起點(diǎn)，如何獲得當(dāng)前頁(yè)面視頻的播放地址。研究過(guò)的同學(xué)可以和我交流交流，不勝感激。

有任何疑問(wèn)，歡迎加群討論：261386924