WebView常見問題

更新時間：2022-01-13 10:39:49

一、簡介

目前部分網頁使用WebView控制項來播放Polyv點播影片或直播影片時，會產生以下問題，在此提供demo供參考方便快速解決問題。

安卓 demo-1.0.5 下載

iOS demo 下載（Git，建議）

iOS demo下載

安卓webview demo描述 - demo中實現了點擊全螢幕按鈕功能（ps：點擊全螢幕後自動橫螢幕）

IOS webview demo描述 - demo中分別演示使用UIWebview、WKWebview

二、FAQ

1. webview 引用直播觀看頁打開白螢幕

不可以隨意劫持Polyv請求的cookie資訊，可能導致播放頁面無法正常跳轉，出現白螢幕現象。

2. 播放器區域白螢幕

由於電信商劫持的可能性，建議引用https的頁面地址解決。

3. iOS UIWebview 已廢棄使用，請使用 WKWebView

影片在h5頁面內播放屬性是 inline playback, UIWebView 預設開，WKWebView 預設關。 UIWebView 在 iOS 11.3 上設定 inline playback 無效，iOS 11.0.3 上可以，所以不建議繼續使用 UIWebView。

苹果官方建议：
从iOS 8.0和OS X 10.10开始，使用WKWebView将Web内容添加到您的应用程序。不要使用UIWebView或WebView。
Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.

補充：蘋果在今年（2020年）4月起已禁止提交包含 UIWebview 的新應用，12月禁止包含 UIwebview 的應用更新

4. ios配置

iOS 需要以下配置，設定 info.plist NSAppTransportSecurity 欄位，允許非HTTPS連線存取。

加入 NSAllowsArbitraryLoadsInWebContent 鍵，允許任意web頁面載入，或設定 NSAllowsArbitraryLoads 為 YES 來停用ATS。

測試發現：使用NSAllowsArbitraryLoadsInWebContent在 iOS 10.3 上影片可能無法播放，所以建議直接關閉ATS。

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

預設小螢幕播放（WKWebView）載入網頁後網頁裡有播放器，但是iOS11上的播放預設是全螢幕播放，沒有辦法小螢幕播放，這裡我們就要進行下設定了

 //配置信息
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
//设置为YES即可
config.allowsInlineMediaPlayback = YES;
//在初始化时讲配置信息传入
WKWebView *mWebView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];

5.Android 虛擬按鍵適配動態調整佈局

如下圖華為mate8機型為例，部分webview頁面底部內容被虛擬按鍵遮擋問題，需要處理Android調整webview適配底部返回鍵等虛擬鍵盤。 ]

6.Android HTTPS頁面引用HTTP資源的問題

Android5.0及以上系統WebView預設不支援同時載入Https和Http混合模式，若直播觀看頁嵌入https頁面，需要增加以下程式碼解決播放

//允许混合模式（http与https）
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
  settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
 }

此外，Android 9及以上系統預設應用禁止Http明文存取，如果需要存取Http網址或內容，請在AndroidManifest.xml的Application標籤中加入 android:usesCleartextTraffic="true" 屬性

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

7.Android 預設影片封面灰色播放按鈕美化

安卓webview video標籤預設顯示如圖播放按鈕背景。透過Web增加以下程式碼後美化如上圖顯示,除以下設定外同樣也可以自訂影片封面圖片：

import android.graphics.Bitmap;
import android.webkit.WebChromeClient;

public class WebChromeClientCustomPoster extends WebChromeClient {
  @Overried
  public Bitmap getDefaultVideoPoster() {
    return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
  }
}

8.Android webview觀看頁全螢幕退出後無法彈起輸入框

在webview的全螢幕/豎螢幕回呼中，添加mWebView.clearFocus();方法。