Просмотр видео через тег Video снятое с телефона

[fortexich]

В общем проблема в следующем нужно сделать чтобы страница позволяла просматривать видео загруженное с телефона (с видео камеры в теге видео)
На браузере все ок, я кодирую файл в base64, без проблем сохраняю его дб и могу посмотреть. На телефоне же когда пытаешься просмотреть файл из base64 при его привышении по объему приблизительно выше 3 мб происходит креш браузера.
Методом, когда я получаю блоб ссылку на загруженный файл

var blobLink    =   URL.createObjectURL(files[0]);

Помогает, но если страницу перезагрузить то ничего не работает.
Есть ли какие то решения сделать эту вещь? как вариант, только я не знаю как это реализовать нужно сохранить этот файл непосредственно в дб (sqlite) а уже потом подключать его через
URL.createObjectURL
Подскажите может кто сталкивался с проблемой?
Повторюсь в браузере ПК все работает прекрасно, проблема, чтобы это работало на телефоне, т.к. походу когда подставляешь тот же base64 в src видео при большой длине строки приводит к крешу браузера.

[fortexich]

Вот это работает во всех браузерах и на телефоне только в файерфоксе. Что тут не так? Мне нужно чтобы это работало в хроме телефона. Такое ощущение, что объекту видео не удается получить длину блоб объекта. причем если перейти напрямую по ссылке блоба будет ошибка воспроизведения. Если же я не передам в нью блоб, что это видео, то создается ссылка на файл, по переходе на которую я вижу код файла целиком.

<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])
                //fileReader.readAsArrayBuffer(file);
    })
});

</script>