<form action="">
<input type="file" id="file"/>
</form>
<div id="result"></div>
<video id="video" style="width:400px;height: 300px;" controls>
<source id="source"></source>
</video>
<script src="js/jquery.min.js"></script>
<script >
function _base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array( len );
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
//var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
$(document).ready(function(){
$("#file").change(function(event){
var files = event.target.files;
var file = files[0]
var fileReader = new FileReader();
fileReader.onloadend = function(event)
{
var content = event.target.result;
//console.log(content)
content = content.split(",")
content = content[1]
var blob = new Blob([_base64ToArrayBuffer(content)],{'type':'video/mp4'});
bloburl = URL.createObjectURL(blob)
$("#result").append("<a href='"+bloburl+"'>"+bloburl+"</a>")
$("#video").attr('src',bloburl);
document.getElementById('video').play();
};
bloburl = URL.createObjectURL(files[0])
$("#result").append("1 - <a href='"+bloburl+"' target='_blank'>"+bloburl+"</a><br>")
fileReader.readAsDataURL(files[0])
})
});
</script>
在计算机浏览器视频中工作。 firefox视频中的手机有效,但突然没有浏览器。为什么? 我在BASE 64中需要的数据,因为我需要在浏览器中存储在sqLite中。一个blob类型的对象是必要的,因为BASE 64的视频打破了手机上的浏览器。