UIWebView iOS中的本地视频/音频播放不工作，使用Meteor（PhoneGap） [英] UIWebView Local Video / Audio playback in iOS not working, using Meteor (PhoneGap)

问题描述

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

这听起来很容易，但似乎有些东西从根本上错了如何< video& / code>和< audio> 标签在iOS UIWebView中处理。

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字符串并将其直接嵌入到标记中。上一次我尝试的是简单的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应用程序中出现问题，那么很难说出问题出在何处。

在任何情况下，是否有解决方法？

解决方案

进一步调查后，问题是由Meteor构建的内部web服务器返回的MIME类型。

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

我通过以 arraybuffer 获取文件，然后重建 Blob ，设置 {type：video / quicktime} （对于.mov文件）。

$ b b

  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 for .mp3。

（注意：此修复不适用于< iOS 8.0，但我没有做任何进一步调查，因为我只需要在封闭的环境中的托管设备上工作）

I'm using Meteor for building a really simple app (in theory). Basically a play button that should start a video.

This sounds easy, but there seems to be something fundamentally wrong with how <video> and <audio> tags are handled in iOS UIWebView.

It is my understanding that Meteor utilizes a local server so you can load asset files from the /public-folder in your Meteor application.

This works as expected for images: <img src="/images/image.png">

However, doing the same with videos and audio-tags throws unexpected errors.

Loading the files remotely works fine too, <video src="http://example.com/video.mp4"></video>, but when the video/audio becomes part of the local filesystem then UIWebView seems to get confused as to what to do with it.

I have experimented with Cordova's File and FileTransfer-plugins to fetch, move, get nativeURLs, and reorganize the files to make any sense of this, but the <video> and <audio> elements still throw errors.

I even tried turning audio-files into a base64-string and embedding it directly into the markup. This does not work either.

Last I tried was simple XHR, retrieving the file as a blob, then making a URL with that:

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;
});

Still no luck. Note that everything I tried worked for image-files, but not for audio/video.

It's hard to say where the problem is originating, if it's how UIWebView handles requests video/audio-files, or something broken in Meteor's tiny webserver-setup that it uses for packaged PhoneGap iOS apps.

In any case, is there a workaround?

解决方案

After further investigation, I came to the conclusion that the problem is with the MIME types returned by the internal webserver that Meteor builds upon.

The webserver seems to be lacking the media MIME types for audio and video files.

I solved it by fetching the file as an arraybuffer and then reconstructing a Blob from it, setting {type: "video/quicktime"} (for a .mov-file).

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;
});

The same method applies to audio-files, audio/mpeg for .mp3.

(Note: this fix did not work on < iOS 8.0, but I did not do any further investigation as I only needed it to work on managed devices in a closed environment)

这篇关于UIWebView iOS中的本地视频/音频播放不工作，使用Meteor（PhoneGap）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！