flutter_inappwebview - 没有 html- 视频

Question

我在 Flutter 应用程序中使用 flutter_inappwebview 来显示本地 html（来自资产）。（我知道：不理想。我更愿意用 Dart 编写整个程序，但现在这不是一个选项）。它工作得很好……除了一件事。无法播放 html 中的视频。

问题
当我在任何浏览器（直接从资产文件夹）中打开 html 时，视频工作正常。所以 html 应该没问题。所有其他 html 在应用程序中工作正常。所以 files 和 pubspec-import 应该没问题。在应用程序中，页面显示视频播放器，但 iOS-sim 和 iOS 设备上都没有内容。在 Android-sim 中它可以工作。

代码
我正在使用：
flutter_inappwebview: ^3.2.0
SDK: ">=2.7.0 <3.0.0"

导入后，我这样使用 inappview。服务器已经运行（flutter 报告：flutter: Server 运行 on http://localhost:8080）

InAppWebViewController webViewController;
InAppWebView webView;

class OfflineViewer extends StatefulWidget {
  @override
  _ViewerState createState() => _ViewerState();
}

class _ViewerState extends State<OfflineViewer> {
  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialUrl: "http://localhost:8080/assets/source/intro.html",
      onWebViewCreated: (InAppWebViewController controller) {
        webViewController = controller;
      },
    );
  }
}

加载的 intro.html 中的视频标签是：

  <video height="600" controls>
    <source src="intro.mp4" type="video/mp4">  
  Your browser does not support the video tag.
  </video>

我试过的东西：
不同的视频格式（webm、ogg）> 没有区别。
将在线视频加载到 html 而不是本地 > 工作。视频加载和播放。
嵌入视频的不同方法（视频标签、iframe、video.js）> 没有区别。
设置 InAppWebViewOptions，如：

cacheEnabled: true,
javaScriptCanOpenWindowsAutomatically: true,
useOnLoadResource: true,
javaScriptEnabled: true,
mediaPlaybackRequiresUserGesture: false,

让这个问题（对我而言）难以解决的是，一旦它嵌入到应用程序中，我就无法捕捉到 html 错误，而独立的 html 不会给出错误。非常感谢任何关于如何解决甚至排除故障的想法。

你好，
马克

Answer 1

不确定，但您的 Info.plist 中可能缺少 NSAppTransportSecurity 设置。这允许您加载 http://localhost:8080 属于的不安全内容。

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

Answer 2

整理好了。只是张贴这个以防其他人有同样的问题。问题的原因是：HTTPServer-class 创建了一个 blob-server。它 returns 一个视频块（状态 200）。 iOS 不接受并想要状态 206（零件）。

基于，我创建了一个 JS 文件，用于转换文档中的所有视频。只需将其添加到任何 html 视频文件中即可：

if(navigator.platform && /iPad|iPhone|iPod|Mac/.test(navigator.platform)){
    window.addEventListener("load", streamVideoBlobs);
 }

function streamVideoBlobs(){
    var allVideos = document.getElementsByTagName("video");
    for(var i = 0, max = allVideos.length; i < max; i++) 
    {
        iOSVideoConvert(allVideos[i]);       
    }
}

async function iOSVideoConvert(video){
    let blob = await fetch(video.src).then(r => r.blob());
    var videoUrl=createObjectURL(blob);
    video.src = videoUrl;
}

function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

除此之外，您还必须设置

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsLocalNetworking</key>
    <true/>
</dict>

在你的 info.plist 中。（您也可以使用 NSAllowsArbitraryLoads，但这需要更多的余地，Apple 可能会在提交应用程序时将其标记下来）。

Answer 3

这让我意识到，问题不是 WebView，而是 LocalServer 端。

当出现视频标签时，我更改了 localServer 逻辑以提供基本 64 位编码的视频源，它对我有效

flutter_inappwebview - 没有 html- 视频

flutter_inappwebview - no html-video

video

webview

flutter