Question

我正在使用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-plugins来获取，移动，获取nativeURL，并重新组织文件以便对此有所了解，但<video>和<audio>元素仍然会抛出错误。

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

最后我试过的是简单的XHR，将文件检索为blob，然后使用该URL创建一个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;
});

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

（注意：此修补程序没有在＆lt; iOS 8.0上工作，但我没有进行任何进一步的调查，因为我只需要它在封闭环境中的托管设备上工作）

iOS浏览器中的UIWebView本地视频/音频播放无效，使用Meteor（PhoneGap）

1 个答案: