iOS中的UIWebView本地视频/音频播放不起作用，使用Meteor（PhoneGap）答案

【问题标题】：UIWebView Local Video / Audio playback in iOS not working, using Meteor (PhoneGap)iOS中的UIWebView本地视频/音频播放不起作用，使用Meteor（PhoneGap）
【发布时间】：2015-01-09 03:29:14
【问题描述】：

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

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

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

这适用于图像： <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 应用程序的小型网络服务器设置中的问题。

无论如何，是否有解决方法？

【问题讨论】：

标签： ios cordova video uiwebview meteor

【解决方案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。

（注意：此修复没有在

【讨论】：