시간이 제한된 텍스트 트랙

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 W3C(World Wide Web 컨소시엄) HTML5 표준의 섹션 4.8.9에 설명된 대로 track 요소를 새롭게 지원합니다.track 요소를 사용하면 HTML5 video 요소에 선택 캡션, 번역 또는 텍스트 설명 등의 시간이 지정된 텍스트 추적을 추가할 수 있습니다.

추적 요소

이 요소의 구문은 다음과 같습니다.


<video id="mainvideo" controls autoplay loop>
  <track src="en_track.vtt" srclang="en" label="English" kind="caption" default>
</video>

<track> 요소는 사용자에게 여러 언어나 동영상 설명을 제공하는, 시간이 지정된 텍스트 파일을 나타냅니다. 여러 트랙을 사용하고, 한 트랙을 동영상이 시작될 때 사용할 기본 트랙으로 설정할 수 있습니다.

텍스트는 동영상 플레이어의 아래쪽에 표시됩니다. 이 시점에는 위치와 색을 제어할 수 없지만, 스크립트를 통해 텍스트를 검색하고 원하는 방식으로 표시할 수 있습니다.

트랙 파일 형식

텍스트 트랙은 간소화된 버전의 WebVTT(Web Video Text Track) 또는 TTML(Timed Text Markup Language) 시간이 지정된 텍스트 파일 형식을 사용합니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 현재 타이밍 신호 및 텍스트 캡션만 지원합니다.

WebVTT

WebVTT 파일은 다음과 같이 표시되는 UTF-8(8비트 Unicode Transformation Format) 형식 텍스트 파일입니다.


WEBVTT

00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith

00:00:08.608 --> 00:00:15.296
This video will teach you how to 
build a sand castle on any beach

이 파일은 첫 번째 줄에서 WEBVTT 태그로 시작하고 뒤에 줄 바꿈이 옵니다. 타이밍 신호는 HH:MM:SS.sss 형식입니다. 시작 신호는 공백, 두 개의 하이픈 및 보다 큼 기호( --> ), 다른 공백으로 구분됩니다. 타이밍 신호는 줄에 단독으로 표시되고 뒤에 줄 바꿈이 옵니다. 신호 바로 뒤에는 캡션 텍스트가 있습니다. 텍스트 캡션은 하나 이상의 줄로 이루어질 수 있습니다. 유일한 제한 사항은 텍스트 줄 사이에 빈 줄이 없어야 한다는 것입니다. WebVTT 파일의 MIME 형식은 "text/vtt"입니다.

TTML

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 TTML(Timed Text Markup Language) 사양에 정의된 TTML 파일 형식의 하위 집합을 사용합니다. Windows Internet Explorer 및 JavaScript를 사용하는 Windows 스토어 앱은 다음 구조를 지원합니다.


<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' >
<body>
<div>

<p begin="00:00:01.878" end="00:00:05.334" >Good day everyone, my name is John Smith</p>
<p begin="00:00:08.608" end="00:00:15.296" >This video will teach you how to<br/>build a sand castle on any beach</p>
</div>

</body>
</tt>


TTML 파일은 네임스페이스 선언과 루트 요소(tt)의 language 특성을 사용합니다. 그 뒤에 bodydiv 요소가 추가됩니다. div 요소 내에는 타이밍 신호가 있습니다. 실제 시간은 여는 단락 태그(<p>)의 특성(begin, end)으로 설정되고 텍스트는 닫는 </p> 태그로 기술됩니다. 빈 줄과 공백은 무시됩니다. 여러 줄이 있는 경우 <br/> 태그로 구분됩니다.

TTML 파일의 MIME 형식은 "application/ttml+xml" 또는 "text/xml"입니다. 자세한 내용은 TTML 사양의 섹션 5.2를 참조하세요.

다중 트랙 파일

예를 들어 사용자에게 여러 언어나 대체 설명을 제공하기 위해 시간이 지정된 텍스트 파일을 여러 개 사용할 수 있습니다. 여러 트랙을 사용하는 경우 한 트랙을 페이지가 언어를 지정하지 않거나 사용자가 언어를 선택하지 않은 경우에 사용할 기본 트랙으로 설정합니다. 동영상 플레이어 내에서 사용자는 기본 제공 사용자 인터페이스를 통해 대체 트랙을 선택할 수 있습니다.

다음 예제는 세 개의 트랙 요소가 있는 동영상 요소를 보여 줍니다.


<video id="mainvideo" controls autoplay loop>
  <source src="video.mp4" type="video/mp4">
  <track id="enTrack" src="engtrack.vtt" label="English" kind="subtitles" srclang="en" default>
  <track id="esTrack" src="spntrack.vtt" label="Spanish" kind="subtitles" srclang="es">
  <track id="deTrack" src="grmtrack.vtt" label="German" kind="subtitles" srclang="de">
</video>


이 예제에서 source 요소는 동영상 파일을 정의하는 데 사용되고 track 요소는 각각 텍스트 변환을 지정합니다. track 요소는 video 요소의 자식입니다. track 요소는 다음 특성을 허용합니다.

특성설명

kind

텍스트 콘텐츠의 형식을 정의합니다. 가능한 값은 다음과 같습니다. subtitles, captions, descriptions, chapters, metadata.

src

시간이 지정된 텍스트 파일의 URL입니다.

srclang

시간이 지정된 텍스트 파일의 언어입니다. 정보 제공 용도로 사용되며 플레이어에서는 사용되지 않습니다.

label

시간이 지정된 텍스트를 식별하는 데 사용할 수 있는 레이블을 제공합니다. 각 트랙에는 고유한 레이블이 있어야 합니다.

default

기본 track 요소를 지정합니다. 지정하지 않으면 트랙이 표시되지 않습니다.

 

track 요소 스크립팅

대부분의 요소와 마찬가지로, track 요소는 스크립팅을 통해 조작할 수 있습니다. 다음 개체, 메서드 및 속성을 사용하여 트랙 콘텐츠와 신호를 관리할 수 있습니다. 트랙은 동영상과 관련된 시간 및 텍스트 콘텐츠를 제공하는 신호 모음입니다.

textTrack 및 textTrackList 개체

개체설명

textTrack

track 요소의 시간이 지정된 텍스트 트랙을 나타냅니다. 트랙은 신호 모음으로 구성됩니다.

var texttract = document.getElementByID("trackElement");

textTrackList

특정 동영상 요소와 관련된 트랙 목록을 나타냅니다.

var texttracklist = document.getElementById("videoelement").textTracks;

 

textTrackListtextTrack 개체 목록을 포함하는 동영상 요소와 관련된 개체입니다. 특정 동영상과 함께 사용되는 트랙 목록(있는 경우)을 가져오기 위해 video 개체는 textTracks 속성을 제공합니다. textTracks 속성은 textTrackList 형식의 개체이며 동영상과 관련된 textTrack 개체 배열입니다.


  var oVideo = document.getElementById(“videoElement”);
  var oTTlist = oVideo.textTracks;   // get the textTrackList 
  var oTrack = oTTlist[0];   	    // get the first text track on the video object
  var oTrack.track

속성설명

VideoElement.textTracks.length

video 요소와 관련된 textTrack 개체 수를 반환합니다.

VideoElement.textTracks[n]

video 요소의 트랙 목록에서 n번째 textTrack을 반환합니다.

TrackElement.track

track 요소의 텍스트 트랙을 반환합니다.

 

다음 예제는 요소의 모든 트랙 목록을 제공하는 textTrackList 개체를 가져오는 방법을 보여 줍니다. 동영상 개체의 textTracks 속성은 textTrackList 개체를 반환합니다. textTrackList 개체는 textTrack 개체 배열입니다.


<!DOCTYPE html >

<html >
<head>
    <title>Track list example</title>
  <script type="text/javascript">
      function getTracks() {
         // get list of tracks
          var allTracks = document.getElementById("video1").textTracks;
         
         //append track label
          for (var i = 0; i < allTracks.length; i++) {
              document.getElementById("display").innerHTML += (allTracks[i].label + "<br/>");  
          }
      }
  </script>
</head>
<body>
<video id="video1" >
<source src="video.mp4">
  <track id="entrack" label="English subtitles" kind="captions" src="example.vtt" srclang="en">
  <track id="sptrack" label="Spanish subtitles" kind="captions" src="examplesp.vtt" srclang="es">
  <track id="detrack" label="German subtitles" kind="captions" src="examplede.vtt" srclang="de">
</video>
<button onclick="getTracks();">click</button>
<div id="display"></div>
</body>
</html>


textTrackCueList 및 textTrackCue 개체

textTrack.cues 속성은 textTrackCue 개체 배열을 반환합니다. textTrackCue 개체 또는 신호에는 식별자, 시작 및 종료 시간, 기타 데이터가 포함됩니다.

개체설명

textTrackCueList

특정 트랙의 모든 신호를 나타내는 배열 개체입니다.

var texttrackcuelist = trackelement.track.cues;

textTrackCue

트랙의 신호를 나타냅니다.

var texttrackcue = texttrackcuelist[i];  // where i == an index into the track cue list array.

 

이 개체는 다음 속성을 노출합니다.

속성설명

textTrackCueList.Item(index)

주어진 인덱스에 해당하는 텍스트 트랙 신호를 반환합니다.

textTrackCueList.Length

목록에 있는 텍스트 트랙 신호 수를 반환합니다.

textTrack.cues

textTrackCueList 개체를 반환합니다.

textTrack.activeCues

현재 활성 상태인 텍스트 트랙 신호 목록의 신호를 textTrackCueList 개체로 반환합니다.

textTrackCue.startTime

시간이 지정된 텍스트 신호의 시작 시간을 반환합니다.

textTrackCue.endTime

시간이 지정된 텍스트 신호의 종료 시간을 반환합니다.

textTrackCue.Id

개별 신호의 고유 식별자를 반환합니다.

textTrackCue.Pause-on-exit

지정한 endTime에 도달할 경우 동영상을 중지할지 여부를 나타냅니다.

textTrackCue.text

TextTrackCue의 텍스트 값을 반환합니다.

textTrackCue.Track

textTrackCue가 속하는 텍스트 트랙 개체를 반환하거나, 그렇지 않으면 "null"을 반환합니다.

 

이 개체는 다음 메서드를 노출합니다.

메서드설명

textTrackCueList.getCueByID(id)

textTrackCueList에서 ID로 신호를 가져옵니다.

textTrackCue.getCueAsHTML()

HTML 요소 및 기타 DOM(문서 개체 모델) 노드로 구성된 문서 조각으로 텍스트 트랙 신호 텍스트를 반환합니다.

 

textTrackCue 개체는 다음 이벤트를 노출합니다.

이벤트설명

끝내기

신호가 완료될 때 발생합니다.

확인

신호가 활성 상태일 때 발생합니다.

 

신호 작업

track 요소의 cues 속성을 사용하면 해당 트랙에 있는 모든 신호의 배열 또는 목록을 가져올 수 있습니다. textTrack.cues 속성은 textTrackCue 개체 배열을 반환합니다. textTrackCue 개체 또는 신호에는 ID, 시작 및 종료 시간, 데이터가 포함됩니다.

현재 신호 가져오기

트랙과 관련된 모든 신호를 가져오는 cues 속성과 반대로, activeCues 속성은 현재 표시되는 신호만 가져옵니다. 다음 예제는 표시되는 자막의 startTimeendTime을 보여 줍니다.


<!DOCTYPE html >

<html >
<head>
    <title>Current cue example</title>
  <script type="text/javascript">
      function eID(elm) {
          return document.getElementById(elm);  // create short cut to getElementById()
      }

      // after elements are loaded, hook the cuechange event on the track element
      window.addEventListener("load", function () {
          eID("track").addEventListener("cuechange", function (e) {
              var myTrack = e.target.track;  // the target property is the track element
              var myCues = myTrack.activeCues;   // activeCues is an array of current cues.
              //  display the start and end times
              eID("display").innerHTML = myCues[0].startTime + " --> " + myCues[0].endTime;
          }, false);

      }, false);
     
  </script>
</head>
<body>
<video id="video1"  controls autoplay>
 <source src="movie.mp4"  >
 <track id='track' label='English captions' src='captions.vtt' kind='subtitles' srclang='en' default  > 
</video>
<div id="display"></div>
</body>
</html>


모든 신호 가져오기

다음 예제에서는 트랙과 관련된 모든 신호를 가져와서 select 상자에 표시합니다. 상자의 항목을 클릭하면 동영상에서 해당 신호가 재생됩니다. 검색을 사용하여 결과를 특정 키워드로 필터링합니다.


<!DOCTYPE html>
<head>
<title>All cues example</title>
<script>

function loadCaptions(track) {
// retrive cues for track element
    var cues = track.track.cues;
    var list = document.getElementById('results');
    for (i = 0; i < cues.length; i++)
    {
        var x = cues[i].getCueAsHTML(); //get the text of the cue
        var option = document.createElement("option"); // create an option in the select list
        option.text = x.textContent;        // assign the text to the option 
        option.setAttribute('data-time', cues[i].startTime);  // assign an attribute called data-time to option
        list.add(option);       // add the new option 
    }    
}

function playCaption(control) 
{
    var o = control.options[control.options.selectedIndex];  //get the option the user clicked
    var t = o.getAttribute('data-time');        // get the start time of that option
    var video = document.getElementById('video');   // get video element. 
    video.currentTime = t - 0.1;                //  move the video to start at the time we want (subtrackting a fudge factor)
}

function search(text) 
{
    var cues = eID('track').track.cues;     // retrieve a list of cues from current track
    var list = eID('results');              // get the select box object
    list.innerHTML = '';                    // clear the select box 
    for (i = 0; i < cues.length; i++) {     // scan through list of cues
        var cuetext = cues[i].getCueAsHTML().textContent;  // get the text content of the current element in cue lists 
        if (cuetext.toLowerCase().indexOf(text.toLowerCase()) != -1)  // does the cue contain the key we're looking for? 
        {                                                             // if a match, create a new option to add to the select box
            var option = document.createElement("option");         
            option.text = cuetext;                                  
            option.setAttribute('data-time', cues[i].startTime);
            list.add(option);
        }
    }   
}

</script>
</head>

<body>
   <video id='video' controls autoplay loop>
     <source src='movie.mp4'>
     <track id='track' label='English captions' src='captions.vtt' kind='subtitles' srclang='en' default onload='loadCaptions(this)'>
   </video>
   <div>Search captions <input onkeyup='search(this.value)' /> </div>
   <div>Click a caption to jump to that time in the video</div>
   <div><select size='10' id='results' onchange='playCaption(this)'></select></div>

</body>
</html>


API 참조

HTML5 Audio and Video

샘플 및 자습서

HTML5 시간 지정 텍스트 트랙 샘플
시간 지정 텍스트 트랙을 사용하여 동영상에 액세스할 수 있도록 설정

Internet Explorer 테스트 드라이브 데모

HTML5 동영상 캡션 작성기
IE10 동영상 캡션

IEBlog 게시물

HTML5 동영상 캡션

사양

HTML5: 섹션 4.8.10.12.5

관련 항목

오디오
동영상

 

 

표시:
© 2014 Microsoft. All rights reserved.