Android開發之在Webview中全屏播放視頻

【版權申明】非商業目的可自由轉載
博文地址：https://blog.csdn.net/ShuSheng0007/article/details/99702252
出自：shusheng007

系列文章
Android開發之Webview中原生與JS交互
Android開發之從Webview中選擇本機文件

概述

出於對成本或者其他原因的考慮，在移動開發中有時會採用混合開發的方式,其中一種方式就是讓Web頁面跑在原生的WebView裏面。本文我們來談論一下如何在webview中全屏播放視頻。

實現方法

本文只談論如何支持使用 HTML 的<video>標籤播放視頻時的全屏問題。在這個方面，IOS開發的簡單性又一次碾壓Android,IOS不需要寫任何代碼，內置的WebView 就可以很好的支持<video>標籤的全屏播放，但是Android卻不行。Android 需要重寫WebChromeClient 裏的onShowCustomView(View view, CustomViewCallback callback)與onHideCustomView()這兩個方法。

onShowCustomView(): 通知宿主程序，當前頁面已經進入全屏模式了。
onHideCustomView() : 通知宿主程序，當前頁面已經退出全屏模式。

方案實施

準備<video>標籤

<video id="banner-video" controls="controls" style="width: 100%;height: auto;">
    <source src="要播放視頻的URL" , type="video/mp4">
    Your browser does not support HTML5 video.
</video>

配置宿主Activity

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="top.ss007.webviewtube">

    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:networkSecurityConfig="@xml/network_security_config"
        android:theme="@style/AppTheme">

        <activity
            android:name=".playvideo.VideoPlayerAct"
            android:configChanges="orientation|screenSize|keyboardHidden"
            android:hardwareAccelerated="true"
            android:theme="@style/Theme.AppCompat.NoActionBar" />
            ...
    </application>

</manifest>

注意設置開啓硬件加速。

配置WebView

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptCanOpenWindowsAutomatically(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
settings.setAllowFileAccess(true);
settings.setDomStorageEnabled(true);
settings.setUseWideViewPort(true); // 關鍵點
 mWebView.setWebViewClient(myWebViewClient);
mWebView.setWebChromeClient(new InsideWebChromeClient());

重寫WebChromeClient

private class InsideWebChromeClient extends WebChromeClient {
    private View mCustomView;
    private CustomViewCallback mCustomViewCallback;

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        if (mCustomView != null) {
            callback.onCustomViewHidden();
            return;
        }
        mCustomView = view;
        mFrameLayout.addView(mCustomView);
        mCustomViewCallback = callback;
        mWebView.setVisibility(View.GONE);
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
    }

    @Override
    public void onHideCustomView() {
        mWebView.setVisibility(View.VISIBLE);
        if (mCustomView == null) {
            return;
        }
        mCustomView.setVisibility(View.GONE);
        mFrameLayout.removeView(mCustomView);
        mCustomViewCallback.onCustomViewHidden();
        mCustomView = null;
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        super.onHideCustomView();
    }
}

經過以上3步基本上就可以實現全屏播放了。

此處再多講一點，有時產品經理會要求我們實現自動全屏播放，你可以直接告訴他自動播放沒有問題，但是自動全屏在Android上是不能實現的。因爲Web設計者出於安全考慮是禁止這樣做的，你可以想象一下，如果一個惡意程序在你點擊了播放視頻後直接全屏播放，霸佔了你的整個屏幕，又不給你退出全屏的功能，逼迫你看完整個視頻…

不過在實際開發過程中，對於某些機型通過不正當的，將來有可能被廢棄的方式是可以做到的。通過使用WebView過時的API
loadUrl，執行v.requestFullscreen(); js 代碼，如下所示

String js="javascript: var v=document.getElementById('banner-video'); v.requestFullscreen(); v.play();";
mWebView.loadUrl(js);

由於行文需要，文中省略了很多細節，容易使人發生困擾， 強烈建議通過文章末尾提供GitHub地址查看源碼，記得給個Star啊。

概述

用心傳播知識，只爲後輩生活更美好（少加班，多陪家人，或者有更多的時間去做其他有意義的事情）。

GitHub源碼地址