Para empezar, necesitamos un campo input y una etiqueta de video en nuestro HTML, así:
<input type="file" accept="video/*" id="input-tag"/>
<hr>
<video controls id="video-tag">
<source id="video-source" src="splashVideo">
Your browser does not support the video tag.
</video>
Ahora, en JS, obtengamos los identificadores de nuestros elementos HTMl y con esto listo, podemos escribir la función que leerá el video y lo mostrará dentro de la etiqueta de video, estamos usando la API FileReader:
const videoSrc = document.querySelector("#video-source");
const videoTag = document.querySelector("#video-tag");
const inputTag = document.querySelector("#input-tag");
inputTag.addEventListener('change', readVideo)
function readVideo(event) {
console.log(event.target.files)
if (event.target.files && event.target.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
console.log('loaded')
videoSrc.src = e.target.result
videoTag.load()
}.bind(this)
reader.readAsDataURL(event.target.files[0]);
}
}
El truco aquí consiste en leer el archivo seleccionado como URL. De esta forma, se puede leer mediante la etiqueta de video.
Cuando el archivo se ha cargado (.onload evento), simplemente apuntamos la propiedad del video al resultado de la instancia de FileReader. Luego ejecute el método load() desde la etiqueta del video.
Top comments (0)