How can i force playsinline for all

Question

I have researched several fixes for this issue but not seem to have solved the problem.

I will outline below the steps I've taken to allow video from a < video > tag element to play in line. I need a solution that will work across different websites and not something that will only work for youtube etc.

Reference I'm using the WKWebView as the containing browser for the web content. I have set allowsInlineMediaPlayback = true (WKWebViewConfiguration). I have also implemented the following piece of JavaScript that i call on a webpage and successfully amends the attributes of the video tag to include "playsinline" "autoplay". thinking being no matter what guff the website developer has , or hasnt got in there i can be sure the attributes i need are added to the video tag. (as a side note i think youtube and others are also making it difficult for devleopers to affect how there website behaves (however much better the UX would be if they did))

Anyway to the code >>

WKWebViewConfiguration *dx = [[WKWebViewConfiguration alloc] init];
    dx.allowsInlineMediaPlayback = TRUE;
    WKWebView * webview = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0,  cell.wv.bounds.size.width, cell.wv.bounds.size.height) configuration:dx];

    [cell addSubview:webview];

    webview.navigationDelegate = self;
    webview.UIDelegate = self;

    webview.frame = CGRectMake(0, 0,  cell.wv.bounds.size.width, cell.wv.bounds.size.height);

    [[webview scrollView] setBounces:NO];
    webview.scrollView.scrollEnabled = NO;

    NSURL *nsurl=[NSURL URLWithString:urlws[indexPath.row]];
    NSURLRequest *request = [NSURLRequest requestWithURL:nsurl cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval: 60.0];
    [webview loadRequest:request];

 NSString *jsCallBack = @"var b = document.querySelector(\"video\"); b.setAttribute(\"webkit-playsinline\",\"\"); b.setAttribute(\"autoplay\",\"\"); b.setAttribute(\"muted\",\"\");";

[webView  evaluateJavaScript:jsCallBack completionHandler:^(NSString *result, NSError *error)
 {
     NSLog(@"Error %@",error);
     NSLog(@"Result %@",result);

I then kick off the playback by calling this js code from ios

NSString *jsCallBack = @"var element = document.querySelector('[aria-label=\"Play\"]'); element.click();";

         [webView  evaluateJavaScript:jsCallBack completionHandler:^(NSString *result, NSError *error)
          {

Results :

The play function is called and video plays but the user is taken into full screen playback which is not what should happen. @IOS WebKit is good, but needs more work and we need some more intelligent apis for this i think as its now seldom that any user wants to see a video in full screen. Its natural if the devise it turned on its side for full screen but otherwise it really smacks of a bad user experience.

If anyone has any ideas please let me know. Many thanks

score 3 · Answer 1 · answered May 28 '20 at 15:41

I had the same issue, I solved adding these to config.xml:

<preference name="AllowInlineMediaPlayback" value="true" />

This allows media playback to appear inline within the screen layout, using browser-supplied controls rather than native controls.

For more details read:

https://cordova.apache.org/docs/en/5.1.1/guide/platforms/ios/config.html

Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

score 0 · Answer 2 · answered Jan 14 '17 at 20:20

0

In which iOS version you are running your app. As for iOS 10 you need to update the attribute to 'playsinline' instead of 'webkit-playsinline'. Also evaluateJavaScript api is asynchronous in wkwebview. So you need to play the video in the completionHandler of the first api call to evaluateJavascript.

answered Jan 14 '17 at 20:20

vikas chandra

146
1
6

Thanks for your suggestions, in my research ive seen either will do >>'playsinline' instead of 'webkit-playsinline'<< ( i have tried with both independently). I am trying to run this code on ios 10.0.2. I will update the above code as I am making the call to play the video in the completion handler for the "adding html attributes" updates bit of code. My thought is that possibly the WKWebView has already decided the video needs to be played in full screen before i get a chance to add the attributes. It really depends when WKWebView pareses the html and decides what its behaviour should be. – user2712678 Jan 14 '17 at 21:28
Let me know if that last bit didnt make sense. Im simply saying the WKWebView must look over the HTML and the video tags in it and see if it needs to play the video in line. I then add the attributes when the page has completely loaded, by which time its too late and the WKWebView will want to play in full screen mode. Im not sure how to add in the "playsinline autoplay" attributes to the pages – user2712678 Jan 14 '17 at 21:32
I have added the 'playsinline' attribute after the HTML page is fully loaded there is no issue with that and it works okay. You can debug the webview is Safari and can directly add attributes in video tag there. Let me know what happens when you play video after editing html in debug mode. – vikas chandra Jan 14 '17 at 22:40

How can i force playsinline for all content

2 Answers2

How can i force playsinline for all