Why WKWebView doesn't display videos? - Swift 3

Question

I successfully added a WKWebView programmatically In a viewController (in viewDidLoad()). When loading a url that contains a video it appears fine, but when I try to tap on it (playing it), I cannot see it, but the audio works fine.

The weird thing is I created a new project just to make sure it should works fine and it did, I copied the same exact code the webView displayed the video as it should.

It was working fine before converting to Swift 3.

This is how it looks when tapping on the video:

Before tapping:

After Tapping:

I also tried another web page:

Before tapping:

After Tapping (Note that the status bar is hidden now):

Simply, this is the code:

override func viewDidLoad() {
    super.viewDidLoad()

    let web = WKWebView(frame: view.frame)
    let urlRequest = URLRequest(url: URL(string: "http://www.w3schools.com/html/html5_video.asp")!)       
    web.frame = view.frame
    web.load(urlRequest)

    view.addSubview(web)
 }

I tried to check many cases without any output. What am I missing?

Thanks in advance.

Answer 1

I think the video is playing behind your WKWebview, could you please debug the view hierarchy and post it? Xcode->Menu->Debug->View Debugging->Capture View Hierarchy when playing the video.

I've tried with a new swift3 project and with your code, there is no problem, here is the view hierarchy:

You can see that from left pannel, the AVPlayerView is in another UIWindow, different from WKWebView,So I guess the UIWindow which contains the WKWebView in your project has a higher windowLevel so it shows above the UIWindow which contains AVPlayer.

And by making the default UIWindow a higher WindowLevel(UIWindowLevelAlert),I reproduced what you've seen in your project.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    window?.windowLevel = UIWindowLevelAlert
    return true
}

Answer 2

When initialising the webview, you need to pass in two configuration properties. Example:

let webConfiguration = WKWebViewConfiguration()
    webConfiguration.allowsInlineMediaPlayback = true
    webConfiguration.mediaTypesRequiringUserActionForPlayback = []

    webView = WKWebView(frame: .zero, configuration: webConfiguration)

You also need to allow arbitrary loads in info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoadsForMedia</key>
    <true/>
</dict>

Answer 3

Considering you are using the URL as absoluteStrings and not for the local files.

Here is a solution to your answer

App Transport Security revised in iOS9 release. Now onwards your application is safe from un secure connection. And iOS forces to make secure connection. This can be conflict in your case. - author SO Thread Reference

From Apple documentation

If your app needs to make a request to an insecure domain, you have to specify this domain in your app's Info.plist file

See the documentation here

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>testdomain.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSExceptionRequiresForwardSecrecy</key>
            <true/>
            <key>NSExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
            <key>NSThirdPartyExceptionAllowsInsecureHTTPLoads</key>
            <false/>
            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
            <true/>
            <key>NSThirdPartyExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
            <key>NSRequiresCertificateTransparency</key>
            <false/>
        </dict>
    </dict>
</dict>

You can also ignore all app transport security restrictions with a single key, if your app has a good reason to do so:

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

You can check more about the Security issues which are associated while connecting to the http sites.

Hope it may help you a bit

Full attribution goes to the authors and the SO threads and the links mentioned in this answer

From the SO thread