Looking to use base64 encoded video in
Goal: Beeing able to cache video for offline access using locastorage.
Approach:
To test my implementation I am downloading file from my server, encoding it with base64 and adding "data:video/mp4;base64,"+base64 as source to html5 video component.
This works great across desktop browsers and on android, but ios (target platform) fails without a proper error message.
Looking for any imputs that might help be move past this brick wall.. I've spent hours searching the web, but found no success stories..
My code:
<HTML>
<body>
<video id="videodiv" width="320" height="240" controls>
</video>
<script>
var viddiv = document.getElementById("videodiv");
var source = document.createElement('source');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'movie.mp4', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.status == 200) {
var uInt8Array = new Uint8Array(this.response);
var i = uInt8Array.length;
var binaryString = new Array(i);
while (i--)
{
binaryString[i] = String.fromCharCode(uInt8Array[i]);
}
var data = binaryString.join('');
var base64 = window.btoa(data);
source.setAttribute('src',"data:video/mp4;base64,"+base64);
viddiv.appendChild(source);
viddiv.play();
}
};
xhr.send();
</script>
</body>
</HTML>
iPad, iOS 7.0.3
