Просмотр видео через тег Video снятое с телефона
В общем проблема в следующем нужно сделать чтобы страница позволяла просматривать видео загруженное с телефона (с видео камеры в теге видео)
На браузере все ок, я кодирую файл в base64, без проблем сохраняю его дб и могу посмотреть. На телефоне же когда пытаешься просмотреть файл из base64 при его привышении по объему приблизительно выше 3 мб происходит креш браузера. Методом, когда я получаю блоб ссылку на загруженный файл var blobLink = URL.createObjectURL(files[0]); Помогает, но если страницу перезагрузить то ничего не работает. Есть ли какие то решения сделать эту вещь? как вариант, только я не знаю как это реализовать нужно сохранить этот файл непосредственно в дб (sqlite) а уже потом подключать его через URL.createObjectURL Подскажите может кто сталкивался с проблемой? Повторюсь в браузере ПК все работает прекрасно, проблема, чтобы это работало на телефоне, т.к. походу когда подставляешь тот же base64 в src видео при большой длине строки приводит к крешу браузера. |
Вот это работает во всех браузерах и на телефоне только в файерфоксе. Что тут не так? Мне нужно чтобы это работало в хроме телефона. Такое ощущение, что объекту видео не удается получить длину блоб объекта. причем если перейти напрямую по ссылке блоба будет ошибка воспроизведения. Если же я не передам в нью блоб, что это видео, то создается ссылка на файл, по переходе на которую я вижу код файла целиком.
<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> |
Часовой пояс GMT +3, время: 20:24. |