javascript - 我如何强制所有 <video> 内容内联播放

Question

我已经研究了此问题的几种修复方法，但似乎没有解决问题。

我将在下面概述我为允许

引用 我使用 WKWebView 作为 Web 内容的包含浏览器。我设置了allowsInlineMediaPlayback = true(WKWebViewConfiguration)。我还实现了在网页上调用的以下 JavaScript 片段，并成功修改了视频标签的属性以包括“playsinline”“autoplay”。认为无论网站开发人员有什么废话，或者没有进入那里，我都可以确定我需要的属性已添加到视频标签中。 (顺便说一句，我认为 YouTube 和其他网站也让开发人员很难影响网站的行为(但如果他们这样做，用户体验会更好))

无论如何，>

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 很好，但需要更多的工作，我们需要一些更智能的 api，我认为因为现在很少有用户想要全屏观看视频。如果将设备翻转为全屏，这是很自然的，但否则确实会带来糟糕的用户体验。

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

Answer 1

我遇到了同样的问题，我解决了将这些添加到 config.xml 中的问题:

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

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

欲了解更多详情，请阅读:

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

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