HTML5 <video> 태그에서 <track> 속성을 이용해서 현재 재생중인 자막의 텍스트를 불러올 수 있다.
우선 자막 텍스트를 추출하기 위해 알아야할 함수는 다음과 같다.
HTMLMediaElement.textTracks
Media 내부에 선언된 <TextTrack> 객체의 순서를 지켜 순서대로 TextTrack을 반환하는 함수이다.
<!DOCTYPE html>
<html>
<body>
<div class="clientView">
<video controls autoplay=true width=500 id="customVideo" >
<source src='https://upload.wikimedia.org/wikipedia/commons/transcoded/1/1c/Joy_%26_Heron_-_Animated_CGI_Spot_by_Passion_Pictures.webm/Joy_%26_Heron_-_Animated_CGI_Spot_by_Passion_Pictures.webm.480p.vp9.webm' type='video/mp4'/>
<track kind="subtitles" default src="https://ch1517.github.io/JSFiddle/vtt/example1.vtt" srclang="en" label="Korean1">
<track kind="subtitles" src="https://ch1517.github.io/JSfFiddle/vtt/example2.vtt" srclang="en" label="Korean2">
<track kind="subtitles" src="https://ch1517.github.io/JSFiddle/vtt/example3.vtt" srclang="en" label="Korean3">
</video>
</div>
<b >자막 읽기</b>
</body>
</html>위와 같은 코드에서 .textTracks의 반환 결과는 [track(Korean1), track(Korean2), track(Korean3)]이 된다.
.textTracks의 반환 결과 :
HTMLMediaElement.pause(), HTMLMediaElement.pause
.pause()는 <video>의 재생상태를 일시정지로 변경하는 메소드로 .play()와 반대되는 함수이다.(.play()는 <video>를 재생시키는 함수).pause는 현재 video의 재생상태를 확인할 수 있는 속성이다.
예를 들어 다음과 같은 코드를 통해서 영상의 재생, 일시정지 상태에 따른 코딩을 할 수 있다.
if(HTMLMediaElement.pause){// 영상이 일시정지 상태일 경우} else {// 영상이 재생 중인 상태일 경우
}
track.oncuechange
<track> 의 cue가 바뀔 때 실행되는 이벤트이다.
.textTracks[index]으로 받은 track를 이용해서 다음과 같이 사용할 수 있다.
track.oncuechange = function(e){
// 실행할 코드 입력
}
track.activeCues
<track> 의 활성화되어있는 cue의 목록이다.
두 가지 예제를 통해서 사용방법을 소개한다.
1. 영상 재생 시 자막 Text 자동으로 읽어오기
위의 소스코드는 oncuechange를 이용해서 현재 cue가 변경될 때마다 텍스트를 업데이트 해준다.
(cue는 WebVTT의 한 시간구간 단위)
JSFiddle에서는 결과가 잘 나오지 않으므로, 아래 페이지를 통해서 결과를 확인할 수 있도록 구현해 놓았다.
https://ch1517.github.io/JSFiddle/views/currentTrack1.html
ch1517.github.io
2. 영상 일시정지 시 자막 Text 읽어오기
위의 소스코드는 pause를 이용해서 현재 영상이 일시정지 상태일 시 현태 cue의 텍스트를 업데이트 해준다.
JSFiddle에서는 결과가 잘 나오지 않으므로, 아래 페이지를 통해서 결과를 확인할 수 있도록 구현해 놓았다.
https://ch1517.github.io/JSFiddle/views/currentTrack2.html
ch1517.github.io
'FrontEnd > HTML5 & CSS & JavaScript' 카테고리의 다른 글
| [HTML5] canvas를 이용한 Image Crop (2) | 2021.02.27 |
|---|---|
| [HTML5] canvas에 마우스로 사각형 그리기 (0) | 2021.02.26 |
| [HTML5] Video Track 태그 사용하기(자막 파일 사용하기) (0) | 2020.01.31 |
| [HTML5] Video 태그 기본 속성 (0) | 2020.01.30 |
| [CSS] 반응형 웹페이지 메뉴바 (0) | 2018.07.29 |
댓글