UIWebView Local video / audio playback on iOS not working using Meteor (PhoneGap)
I am using Meteor to create a really simple application (in theory). Basically a play button that should start the video.
This sounds simple, but there seems to be something fundamentally wrong with the way tags are handled <video>
and <audio>
processed in the iOS UIWebView.
I understand that Meteor uses a local server so that you can download asset files from an /public
-folder in the Meteor app.
This works as expected for images: <img src="/images/image.png">
However, doing the same with video and audio tags creates unexpected errors.
Uploading files remotely works great <video src="http://example.com/video.mp4"></video>
, but when the video / audio becomes part of the local filesystem, the UIWebView seems to get confused as to what to do with it.
I've experimented with Cordova files and FileTransfer plugins to fetch, move, get nativeURL and reorganize files to figure this out, but the items <video>
and <audio>
still throw errors.
I even tried to convert audio files to base64 string and embed it directly into markup. It doesn't work either.
The last one I tried was a simple XHR, fetching the file as a blob, then generating a URL with this:
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've tried to work for image files, but not audio / video.
It's hard to tell where the issue is, if this is how the UIWebView handles video / audio requests or something broken in the tiny Meteor web server it uses for packaged iOS PhoneGap apps.
Is there a workaround anyway?
source to share
After further research, I concluded that the problem was related to the MIME types returned by the back-end web server that Meteor is based on.
The web server seems to be missing media MIME types for audio and video files.
I solved it by extracting the file as arraybuffer
and then restoring from it Blob
by installing {type: "video/quicktime"}
(for .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 research as I only needed to work with managed devices in a closed environment)
source to share