JAVA/컨셉 , 예제

자바(JAVA) mp4 파일 video control 속성 적용

minwoohi 2020. 2. 19. 14:01

동영상 파일을 재생할 때, 특정 구간을 동작시켜야 하는 일이 생겼다 (유튜브에서 시간대 하이퍼링크 클릭 기능)

이에 따라 html5의 video 태그 사용해 해결하려고 했는데, 태그에서 플레이를 제외한 기능에 대해 동작하지 않는 것을 알게 됐다 ㅠ

 

 

자바에서 ResponseEntity<FileSystemResource> 이용해 다운로드 기능 개발해둔 상태였고, 크롬에서 요청하면 다음 영상과 같이 플레이 / 정지 이외의 기능은 사용하지 못했다.

 

 

https://stackoverflow.com/questions/8088364/html5-video-will-not-loop

 

HTML5 video will not loop

I have a video as a background to a web page, and I am trying to get it to loop. Here is the code:

갓스택 플로우에서 내가 힌트를 얻은 문장은 다음과 같다.

 

<video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response.

 

번역기님께서 해석해주셨는데 너무 정확해서 놀랐다 ㄷㄷ

 

Chrome의 <video> 요소는 부분 콘텐츠 요청을 이해하는 서버에서 비디오 파일을 제공 한 경우에만 작동합니다. 즉, 서버는 206 "부분 컨텐츠"응답으로 "범위"헤더를 포함하는 요청을 처리해야합니다.

 

이에 따라 헤더에 Range 값을 추가해줬는데,

자바의 경우 다음과 같이 헤더에 Accept-Ranges=bytes 추가해주면 된다.

HttpHeaders header = new HttpHeaders();

header.set("Accept-Ranges", "bytes");

 

 

이렇게 설정하면 다음과 같이 video 엘레먼트의 기능들 이상 없이 이용할 수 있다 (currentTime 등)

이를 기반으로 특정 시간대를 재생할 수 있는데 다음 링크보고 쓰면 댐

 

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_video_currenttime

 

Tryit Editor v3.6

Your browser does not support the video tag. Get current time position Set time position to 5 seconds var x = document.getElementById("myVideo"); function getCurTime() { alert(x.currentTime); } function setCurTime() { x.currentTime = 5; }

www.w3schools.com