I am currently developing an iOS application using Meteor that requires the playback of locally stored mp4 files. However, I am facing an issue where the mobile app is not displaying any videos.
Here is the template I am using:
<template name="video">
{{#if cordova}}
Mobile Player
<video webkit-playsinline id="example_video_1" width="50%" height="20%">
<source src="/my_vid.mp4" type="video/mp4">
</video>
{{else}}
Desktop
<video control id="example_video_1" width="50%" height="20%" src="/my_vid.mp4">
</video>
{{/if}}
</template>
While the video plays fine in the desktop version, I am encountering difficulties with getting it to work on the iOS version.
This is the Video.js code corresponding to this issue:
if(Meteor.isClient)
{
Template.video.rendered = function()
{
videojs("example_video_1",
{
"controls" : true,
"autoplay": true,
"techOrder" : ["html5", "flash"],
preload: "auto"
},
function()
{
}
)
}
Template.video.helpers({
cordova: function()
{
getBlobURL("/my_vid.mp4", "video/mp4", function(url, blob)
{
$("video")[0].src = url
});
return Meteor.isCordova;
}
})
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();
}
}
The following snippet provides a solution sourced from this StackOverflow question. Despite attempting to implement this solution, I have not been able to resolve the issue so far.
I also followed the instructions outlined here, by adding a config.xml and mobile-config.js file, but the problem persists.
It appears that the root cause might be Cordova setting an incorrect MIME-type, and while the previously mentioned SO solution seemed promising, I have had no luck getting it to work. Any guidance or assistance on this matter would be highly appreciated.