WebView常见问题

一、简介

  目前部分网页使用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();方法。