Intenté usar base64 para obtener datos de imagen:
function previewFile() { const preview = document.getElementById('video1'); const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.addEventListener("load", function() { // convert to base64 preview.src = reader.result; }, false); if (file) { reader.readAsDataURL(file); } } <input type="file" onchange="previewFile()"><br> <video width="320" height="240" id="video1" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>Este script te hace cargar un archivo mp4 y luego lo mostrará.
El problema es que base64 es demasiado largo. ¿Hay alguna otra forma de obtener los datos del archivo pero más corta?
Desea usar Blob url para src más corto.
Convertir Base64 a Blob
Cambio:
reader.resulta:
window.URL.createObjectURL(file) function previewFile() { const preview = document.getElementById('video1'); const file = document.querySelector('input[type=file]').files[0]; const reader = new FileReader(); reader.addEventListener("load", function() { // convert to base64 preview.src = window.URL.createObjectURL(file); }, false); if (file) { reader.readAsDataURL(file); } } <input type="file" onchange="previewFile()"><br> <video width="320" height="240" id="video1" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>