ios - iOS 中的 UIWebView 本地视频/音频播放无法使用 Meteor (PhoneGap)

Question

我正在使用 Meteor 构建一个非常简单的应用程序(理论上)。基本上是一个应该开始播放视频的播放按钮。

这听起来很简单，但是 <video> 的方式似乎存在根本性的错误和 <audio>标记在 iOS UIWebView 中处理。

据我了解，Meteor 使用本地服务器，因此您可以从 /public 加载 Assets 文件。 -Meteor 应用程序中的文件夹。

这对图像如预期的那样有效: <img src="/images/image.png">

但是，对视频和音频标签执行相同操作会引发意外错误。

远程加载文件也能正常工作，<video src="http://example.com/video.mp4"></video> ，但是当视频/音频成为本地文件系统的一部分时，UIWebView 似乎对如何处理它感到困惑。

我已经尝试使用 Cordova 的 File 和 FileTransfer 插件来获取、移动、获取 nativeURL 并重新组织文件以使其有意义，但是 <video>和 <audio>元素仍然会抛出错误。

我什至尝试将音频文件转换为 base64 字符串并将其直接嵌入到标记中。这也不起作用。

我最后尝试的是简单的 XHR，将文件作为 blob 检索，然后用它制作一个 URL:

var xhr = new XMLHttpRequest();
xhr.open("get", "/videos/example.mp4");
xhr.responseType = "blob";
xhr.addEventListener("load", function() {
  var blob = this.response;
  var url = window.URL.createObjectURL(blob);

  $("video")[0].src = url;
});

仍然没有运气。请注意，我尝试的一切都适用于图像文件，但不适用于音频/视频。

很难说问题出在哪里，是 UIWebView 处理视频/音频文件请求的方式，还是 Meteor 用于打包 PhoneGap iOS 应用程序的微型网络服务器设置中的某些问题。

无论如何，有解决方法吗？

Answer 1

经过进一步调查，我得出的结论是问题出在 Meteor 构建的内部网络服务器返回的 MIME 类型上。

网络服务器似乎缺少音频和视频文件的媒体 MIME 类型。

我通过将文件作为 arraybuffer 来解决它然后重建一个 Blob从中设置{type: "video/quicktime"} (对于 .mov 文件)。

function getBlobURL(url, mime, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";

  xhr.addEventListener("load", function() {
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: mime } );
    var url = window.URL.createObjectURL(blob);

    callback(url, blob);
  });
  xhr.send();
}
getBlobURL("/videos/example.mov", "video/quicktime", function(url, blob) {
  $("video")[0].src = url;
});

同样的方法适用于音频文件，audio/mpeg对于 .mp3。

(注意:这个修复没有在