동적 TextTrack 개체

새로운 미디어 메서드를 사용하여 HTML5 동영상 앱에 동적으로 선택 캡션 TextTrackTextTrackCue 개체를 추가할 수 있습니다.

Internet Explorer 11에서는 이제 W3C HTML5 사양에 설명된 대로 앱에서 직접 TextTrackTextTrackCue 개체를 추가하는 세 가지 새로운 메서드를 지원합니다. 새 메서드는 다음과 같습니다.

메서드설명
addTextTrack TextTrack 개체를 현재 동영상에 추가합니다.
addCue TextTrackCue 개체를 TextTrack에 추가합니다.
removeCue TextTrackCue 개체를 TextTrack 개체에서 제거합니다.

 

Internet Explorer 10에서는 TTML(Timed Text Markup Language) 또는 WebVTT(Web Video Text Track) 파일을 만들고 Track 요소를 통해 로드하여 동영상에 선택 캡션을 추가합니다. 이 방법은 신호를 미리 만든 경우 제대로 작동했지만 파일이 로드된 후에는 텍스트를 변경할 수 없었습니다. IE11에서는 파일 없이 동영상에 트랙과 신호를 추가할 수 있도록 하여 더 많은 유연성을 제공합니다. 따라서 더 많은 앱이 여러 가지 이유로 캡션을 사용할 수 있게 되었습니다. 웹 서버에서 TTML 또는 WebVTT 파일을 보내는 경우 올바른 MIME 형식을 전송해야 합니다. 서버는 텍스트 트랙 MIME 형식이 아니라 동영상 MIME 형식에 대해 설정된 경우가 일반적입니다. TTML 또는 WebVTT MIME 형식에 대한 요구를 무시하고 XMLHttpRequest(XHR)를 사용하여 캡션 파일을 간단한 텍스트 파일로 클라이언트에 보낼 수 있습니다. 시작 시간 및 종료 시간과 메시지가 포함된 신호를 전송한 다음 클라이언트에서 런타임에 만들어진 트랙에 추가할 수 있습니다.

HTML5 동영상 캡션 작성기처럼 동영상을 보면서 캡션을 작성할 수 있는 캡션 도구를 만들 수도 있습니다. 새 신호를 만들 때 텍스트 트랙에 추가하고 동영상과 함께 즉시 테스트할 수 있습니다.

TextTrack 및 TextTrackCue 개체 추가

TextTrackTextTrackCue 개체를 추가하려면 먼저 프로그래밍 방식으로 TextTrack을 만듭니다. addTextTrack 메서드를 사용하여 동영상 요소에 연결된 빈 TextTrack을 만듭니다. 시작 시간 및 종료 시간과 표시할 텍스트 메시지를 매개 변수로 사용하여 TextTrack을 호출하면 addCue에 캡션을 추가할 수 있습니다.

참고  addTextTrack을 사용하여 만든 TextTrack에만 신호를 추가할 수 있습니다. Track 요소를 사용하여 파일에서 로드된 TextTrack에 적용하면 IE11에서 InvalidStateError가 발생합니다.

다음 예제의 동영상 요소는 controls, autoplay,및 muted 특성을 사용하여 기본 제공 재생 컨트롤을 제공하고 로드 시 동영상을 시작하고 소리를 끕니다. 이러한 특성이 있으면 true이고, 없으면 false이므로 값을 할당할 필요는 없습니다. 원본 요소를 사용하여 video 원본 파일을 설정합니다. 이 예제에서는 일반 동영상 파일을 지정하므로 임의의 mp4 동영상으로 대체할 수 있습니다.

TextTrackCue에 대한 시작 시간, 종료 시간 및 간단한 캡션 메시지가 루프에서 만들어집니다. 시작 시간과 종료 시간은 각 메시지가 5초 동안 표시되도록 설정됩니다. HTML5 동영상 사용에 대한 자세한 내용은 HTML5를 사용하여 웹 페이지에서 동영상 파일을 재생하는 방법을 참조하세요.


<!DOCTYPE html >

<html >
  <head>
    <title>Add Text Tracks example</title>
</head>
<body>

<video id="video1" controls="controls" muted="muted">
     <!-- change to your own mp4 video file -->
  <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4" />   
  HTML5 Video not supported 
</video>

 <script>
   var video = document.getElementById("video1");
   var startTime, endTime, message;
   var newTextTrack = video.addTextTrack("captions", "sample");
   newTextTrack.mode = newTextTrack.SHOWING; // set track to display
   // create some cues and add them to the new track 
   for (var i = 0; i < 30; i++) {
     startTime = i * 5;
     endTime = ((i * 5) + 5);
     message = "This is number " + i;
     newTextTrack.addCue(new TextTrackCue(startTime, endTime, message));
   }
   video.play();
  </script>
</body>
</html>


TextTrack 개체에서 TextTrackCue 제거

removeCue를 사용하여 기존 TextTrackCue를 제거할 수 있습니다. 이 예제에서는 동영상 재생 시작하고 표시를 위해 각 신호를 검색합니다. 두 번째 신호를 확인하는 경우 removeCue를 사용하여 표시되기 전에 삭제합니다.


<!DOCTYPE html >
<html >
  <head>
    <title>Remove Cue example</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>

<video id="video1" controls muted autoplay>
    <source src="video.mp4">
    HTML5 Video not supported 
</video>

 <script type="text/javascript">
    var video = document.getElementById("video1");
    var beginTime, endTime, message; 
    var newTextTrack = video.addTextTrack("captions", "sample");
    newTextTrack.mode = newTextTrack.SHOWING; // set track to display
    // create some cues and add them to the new track 
    for(var i=0;i<10;i++){
        beginTime =  i * 5 ;
        endTime = ( (i * 5) +  5);
        message =  "This is number " + i; 
        newTextTrack.addCue(new TextTrackCue(beginTime, endTime, message));
    }
    //  Watch for cue change events
    newTextTrack.addEventListener("cuechange", function () {
            // get current cue, and remove it if it's number 2
            var currentCue = newTextTrack.activeCues[0];             
            if (currentCue.text == "This is number 2") {
                newTextTrack.removeCue(currentCue)
            }            
        },false);
     
  </script>
</body>
</html>


removeCue 메서드를 사용하는 경우 TextTrackCue 개체가 텍스트 트랙의 TextTrackCue와 일치해야 하며, 그렇지 않으면 NotFoundError 예외가 발생합니다.

관련 항목

HTML5를 사용하여 웹 페이지에서 동영상 파일을 재생하는 방법
TextTrackCue
addTextTrack
removeCue
addCue

 

 

표시:
© 2015 Microsoft