[Javascript] input file 으로 비디오를 가져와 재생

input type='file' 로 비디오 파일을 선택해서 video 태그로 재생해보자

 

<!-- HTML -->
<input id="file" type="file" accept="video/mp4,video/mkv, video/x-m4v,video/*">
<video id="video"></video>

html

input 에 type 은 file로, accept 로 비디오 확장자로 설정했다.

 

 

// Javascript

const inputFile = document.getElementById("file");
const video = document.getElementById("video");

inputFile.addEventListener("change", function(){
    const file = inputFile.files[0];
    const videourl = URL.createObjectURL(file);
    video.setAttribute("src", videourl);
    video.play();
})

 

일단 간단하게 이렇게 만들수 있다.

 

file loaded

 

샘플 페이지

codepen.io/mika0203/pen/VwPKLLM