WKWebView video does not play inline

Question

So according to Apple's documentation : https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback

I should be able to play videos inline easily using Swift 4, but no matter what I do it always opens the video in the native video player.

This is my code :

convenience init(style: UITableViewCell.CellStyle, reuseIdentifier: String?, url: String = "", title: String) {
        self.init(style: style, reuseIdentifier: reuseIdentifier)
        self.videoTitleLabel.text = title
        self.urlToVideo = url
        setUpUI()
        setUpLayout()
        webView.backgroundColor = .smalt
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.configuration.allowsInlineMediaPlayback = true
        webView.configuration.preferences.javaScriptEnabled = true
        webView.load(URLRequest(url: URL(string: self.urlToVideo + "?playsinline")! ))
    }

What Am I doing wrong?

Did you try with - "playsinline=1" - just in case it does not default as expected? — Mick, Oct 21 '19 at 09:58
@Mick yes. I have tried playinline=1 and it did not work. I have also tried controls=0 to get rid of the controls and that did not work either — Matias Barrios, Oct 21 '19 at 11:00

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

10

From looking at some other issues people have reported and the detail in the Apple documentation, I think the issue is that WKWebViewConfiguration has to be set before the WKWebView is created.

From the apple documentation:

Using the WKWebViewConfiguration class, you can determine how soon a webpage is rendered, how media playback is handled, the granularity of items that the user can select, and many other options.

WKWebViewConfiguration is only used when a web view is first initialized. You cannot use this class to change the web view's configuration after it has been created.

This aligns with the example that apple provide for using a WKWebView (https://developer.apple.com/documentation/webkit/wkwebview) where you cans see the WKWebViewConfiguration is passed to the WKWebView set up. I've added in the playsinline as an example for your case.

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
    
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.allowsInlineMediaPlayback = true //** Added as an example for your case
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://www.apple.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }}

It would seem to make more sense if the property could not be set subsequently to avoid this confusion, but it appears from the documentation this is how it works.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 21 '19 at 11:23

Mick

24,231
1
54
120

Thanks for your reply. It worked perfectly fine. The only problem I am facing now is that if I allow the user to play it with the native player, controls are never disabled and the user can skip the entire video. – Matias Barrios Oct 21 '19 at 16:16
Do you know if its possible to change this behaviour? – Matias Barrios Oct 21 '19 at 16:16
@MatiasBarrios - could you explain in a little more detail as I'm not sure I understand? – Mick Oct 21 '19 at 21:40
yes. When I embed the video I can see the you tube play button and when I click it plays I the native video player for iOS. But I can't disable the controls on that player so the user can skip the video entirely – Matias Barrios Oct 21 '19 at 21:55
@MatiasBarrios - ok, I think you mean being able to disable the controls on an embedded YouTube video now? If so I would post a new question asking this specifically, although I think you may find current YouTube policies are not set up to support that (e.g. https://stackoverflow.com/a/52767228/334402) – Mick Oct 22 '19 at 09:03
This cost me 4 hours of my life - Thanks a lot for solving it! – MichiZH Apr 17 '20 at 07:54
1

I found that if the `WKWebView` is created in xib, the updated configuration would not work, I have to "tick" the "Inline Playback" in XIB "Attribute inspector" and it works fine. – benleung Aug 09 '21 at 11:01

WKWebView video does not play inline

1 Answers1