我如何为所有 <video> 内容强制播放内联答案

【问题标题】：How can i force playsinline for all <video> content我如何为所有 <video> 内容强制播放内联
【发布时间】：2017-01-14 19:11:07
【问题描述】：

我已经研究了几个解决这个问题的方法，但似乎没有解决这个问题。

我将在下面概述我为允许来自

参考我使用 WKWebView 作为 Web 内容的包含浏览器。我设置了allowInlineMediaPlayback = true (WKWebViewConfiguration)。我还实现了以下一段我在网页上调用的 JavaScript，并成功地修改了视频标签的属性以包括“playsinline”“自动播放”。考虑无论网站开发人员有什么胡言乱语，或者没有进入那里，我都可以确定我需要的属性已添加到视频标签中。（作为旁注，我认为 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，因为我认为现在很少有用户想要全屏观看视频。如果该设计将其转向全屏，那是很自然的，但否则它确实会带来糟糕的用户体验。

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

【问题讨论】：

标签： javascript ios video

【解决方案1】：

我有同样的问题，我解决了将这些添加到 config.xml：

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

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

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

【讨论】：

【解决方案2】：

您在哪个 iOS 版本中运行您的应用。对于 iOS 10，您需要将属性更新为“playsinline”而不是“webkit-playsinline”。此外，evaluateJavaScript api 在 wkwebview 中是异步的。所以需要在第一个api调用evaluateJavascript的completionHandler中播放视频。

【讨论】：

感谢您的建议，在我的研究中，我看到任何一个都会做 >>'playsinline' 而不是 'webkit-playsinline'
如果最后一点没有意义，请告诉我。我只是说 WKWebView 必须查看 HTML 和其中的视频标签，看看它是否需要在线播放视频。然后我在页面完全加载时添加属性，到那时为时已晚，WKWebView 将希望以全屏模式播放。在 WKWebView 做出此决定之前，我不确定如何在页面
我在 HTML 页面完全加载后添加了 'playsinline' 属性，这没有问题，并且可以正常工作。您可以调试 webview 是 Safari 并且可以直接在 video 标签中添加属性。让我知道在调试模式下编辑 html 后播放视频时会发生什么。