flutter_inappwebview - 没有 html 视频答案

【问题标题】：flutter_inappwebview - no html-videoflutter_inappwebview - 没有 html 视频
【发布时间】：2020-05-22 13:59:07
【问题描述】：

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

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

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

在导入之后，我像这样使用 inappview。服务器已经在运行（flutter 报告：flutter: Server running 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-tag 是：

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

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

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

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

您好，
标记

【问题讨论】：

标签： flutter video webview

【解决方案1】：

整理好了。只是发布这个以防其他人有同样的问题。问题的原因是：HTTPServer 类创建了一个 blob 服务器。它以一个块返回一个视频（状态 200）。 iOS 不接受这一点，需要状态 206（部分）。

基于https://stackoverflow.com/a/54004600/6007404，我创建了一个 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 可能会在提交应用程序时将其标记出来）。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我的 info.plist 中有这个，所以不是这样。不过，感谢您的回答！

【解决方案3】：

https://stackoverflow.com/a/61999847/15258962 这让我意识到，问题不在于 WebView，而在于 LocalServer 端。

当视频标签出现时，我将 localServer 逻辑更改为提供 basic64 编码的视频源，它对我有用

【讨论】：