UIWebView Local Video / Audio playback in iOS not

Question

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?

Answer 1

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)