Question

我已针对此问题研究了几个修复程序，但似乎没有解决问题。

我将在下面概述我为了允许来自＆lt;视频＆gt;标签元素在线上播放。我需要一个可以在不同网站上运行的解决方案，而不仅仅适用于youtube等。

参考我正在使用WKWebView作为Web内容的包含浏览器。我设置了allowInlineMediaPlayback = true（WKWebViewConfiguration）。我还实现了以下我在网页上调用的JavaScript，并成功修改了视频标记的属性以包含“playsinline”“autoplay”。想想无论网站开发者有什么guff，或者没有进入那里我可以确定我需要的属性被添加到视频标签中。（作为旁注，我认为youtube和其他人也使得devleopers很难影响网站的行为方式（如果他们这样做，那么用户体验会更好）。

无论如何代码＆gt;＆gt;

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);

然后我通过从ios

调用此js代码启动播放

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

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

结果：

调用播放功能并播放视频，但用户将进入全屏播放，这不是应该发生的事情。 @IOS WebKit很好，但需要更多工作，我们需要一些更智能的apis，我认为现在很少有任何用户想要全屏观看视频。如果设计它全面转向它的一面是自然的，否则它真的是一个糟糕的用户体验。

如果有任何想法，请告诉我。非常感谢

Answer 1

我遇到了同样的问题，我解决了将它们添加到config.xml中的问题：

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

这允许媒体播放器使用浏览器提供的控件而不是本机控件在屏幕布局中内联显示。

有关更多详细信息，请阅读：

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

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

Answer 2

您运行应用的iOS版本。对于iOS 10，您需要将属性更新为“playinline”＆＃39;而不是＆＃39; webkit-playsinline＆＃39;。另外，evaluateWavaScript api在wkwebview中是异步的。所以你需要在第一次api调用的completionHandler中播放视频来评估JavaScript。

我如何强制所有<video>内容的playinline

2 个答案: