javascript 로컬에 있는 동영상 웹에서 재생하기

 

javascript 로컬에 있는 동영상 웹에서 재생하기

 

프로젝트를 하다보면 업로드 된 동영상을 재생 해달라는 요청을 받곤 한다.

이를 구현하기 위해 몇가지 가정하에 진행하도록 하겠다.

 

- 파일업로드가 정상적으로 이루어 진다.

- 저장된 파일의 경로를 알고있다.

- 파일명은 실제파일과 저장파일명으로 구분하되 저장파일명은 영문과 숫자로만 되어있다.( 재생에 필요한건 저장파일명)

- JSP 페이지에서 저장파일명을 정상적으로 불러와 진다.

- 웹에서 재생 가능한 파일로 인코딩 되어있다고 가정한다.

 

저장파일명을 불러오는 방법은 ajax를 통해 가져오는 방법과 model 에 넣어서 직접 jsp 파일에서 받는 방법을 설명하겠다.

 

[공통 jsp]

<input type="hidden" id="video" value=""/> <!-- 파일명 확인용 -->

<video id="videoPlay" width="700" height="600" controls autoplay>      
    <source type="video/mp4" src="" type="video/mp4" />      
    <source src="mov_bbb.ogg" type="video/ogg">      
    Your browser does not support HTML5 video.    
</video>

 

 

 

[ajax로 불러올 경우]

ajax success :

저장된 파일명(saveFileNm)을 불러왔다면

$("#video").val(data.saveFileNm); <!-- 파일명 확인용 -->

<!-- id가 videoPlay 인 요소를 찾아 src 속서을 바꿔준다 -->

$("#videoPlay").attr("src", "동영상파일이 올라간 경로"+data.saveFileNm);

 

해당 ajax가 있는 function을 페이지 로딩 시 실행되도록 한다.

ex)

$(function(){
    function명();
});

 

[model로 받을 경우]

 - controller

 model.addAttribute("saveFileNm", saveFileNm); /*모델에 담아서 넘긴다.*/

 

 - jsp

<input type="hidden" id="saveFileNm" value="${saveFileNm }"> <!-- 값을 받아 hidden으로 받는다. -->

 

<script type="text/javascript" defer="defer">

$(function(){

/* 페이지가 로딩될 때 videoPlay의 src속성을 input type hidden 의 value값으로 바꿔준다. */
      $("#videoPlay").attr("src", "저장경로"+$('#saveFileNm').val());
 });

</script>

 

그럼 <video> 에 autoplay 속성을 주었기 때문에 페이지가 로딩되면 동영상이 재생 된다.