SDP(Simple Delivery Profile) 캡션 스타일 지정

SDP(Simple Delivery Profile)를 사용하여 HTML5 동영상에 캡션을 배치하고 스타일을 지정할 수 있습니다.

Internet Explorer 11에서는 SDP를 사용하여 선택 캡션 텍스트의 스타일을 지정하고 이를 동영상 화면에 배치할 수 있습니다. SDP는 동영상 프레임의 아무 곳에나 텍스트를 배치하고 표시 향상 또는 강조를 위해 스타일을 지정할 수 있는 선택 캡션을 만들기 위한 새 W3C 표준입니다.

TTML(Timed Text Markup Language)을 기준으로 다음 작업을 할 수 있습니다.

  • 텍스트 색을 변경합니다.
  • 단색 배경을 만듭니다.
  • 글꼴, 글꼴 크기 및 글꼴 스타일을 변경합니다.
  • 화면의 텍스트에 애니메이션 효과를 줍니다.

이러한 새 기능을 사용하여 다음 작업을 할 수 있습니다.

  • 여러 스피커가 표시되면 음성 풍선 도움말을 시뮬레이션합니다.
  • 밝은 배경이나 어두운 배경에서 더 잘 표시되는 텍스트 색을 설정합니다.
  • 강조를 위해 텍스트를 한 번에 한 문자씩 표시합니다.

IE11용 SDP 텍스트 작성

IE11용 SDP 기반 TTML 코드 작성은 Internet Explorer 10용 TTML 캡션 코드 작성과 큰 차이가 없습니다.

헤더 정보는 이전 버전과 비슷하며 네임스페이스 및 버전에 대한 다음 요소를 포함합니다.

  • 첫 번째 줄에서는 XML 파일임을 정의합니다. <?xml version="1.0" encoding="utf-8"?>
  • 다음 줄은 언어 및 네임스페이스 정의입니다.
    <tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" 
       xmlns:s="http://www.w3.org/ns/ttml#styling"  
       xmlns:p="http://www.w3.org/ns/ttml#parameter">
    
    

페이지의 <head> 영역에는 프로필, 스타일 지정 및 레이아웃 섹션이 포함되어 있습니다. 프로필 섹션은 <p:profile> 태그를 사용하며 프로필 이름으로 구성됩니다.

<p:profile use="http://www.w3.org/ns/ttml/profile/sdp-us"/>

스타일 지정 섹션에서는 페이지의 텍스트 스타일을 정의합니다. 스타일에는 다음 항목이 포함됩니다.

  • 스타일의 ID
  • 표시 기본 설정(auto, none 등)
  • 텍스트 색
  • 텍스트 맞춤(left, center, right)
  • 윤곽선(또는 스트로크) 색 및 너비
  • 배경색 및 투명도
  • 텍스트의 원점(x/y 위치), 백분율로 표시됨(예: 30%)
  • 범위(텍스트 상자 또는 배경의 크기), 백분율로 표시됨(예: 75%)

레이아웃 섹션에서는 최대 4개 영역에 대해 다음 특성을 정의합니다.

  • 영역의 ID
  • 영역, 화면 위치의 기본 단위
  • 겹쳐서 표시 텍스트의 시작 시간 및 종료 시간
  • 표시 기본 설정, 스타일에서 꺼져 있을 때 특정 텍스트를 켜는 데 주로 사용됩니다.
이러한 태그는 시작하는 데 필요한 기본 태그입니다. W3C 사양 선택 캡션에 대한 TTML Simple Delivery Profile(미국)에 설명된 다른 많은 스타일 및 레이아웃 옵션이 있습니다.

스타일이 지정된 선택 캡션을 만들기 위해 따라야 하는 W3C 사양의 몇 가지 규칙이 있습니다. 다음은 최상위 문제 목록입니다.

  • 모든 문서에 tt, headbody 요소가 있어야 합니다.
  • 모든 문서에 styling 요소와 layout 요소가 둘 다 있어야 합니다.
  • div 또는 span 요소를 중첩할 수 없습니다. 요소당 한 번에 하나의 수준만 허용됩니다. spandiv의 자식으로 사용할 수 있습니다.
참고  요소의 언어 순서가 요소의 시간 순서와 다른 두 요소가 한 문서에 포함되면 안 됩니다.

따라서 시작 시간에 따라 시간순으로 신호를 정렬해야 하며, 이후 시간을 이전 시간보다 앞에 배치하면 안 됩니다. 예를 들면 다음과 같습니다.

올바른 방법:

<p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is the first caption</p>
<p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is the second caption</p>
<p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> This is the third caption</p>
<p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> This is the fourth caption</p> 

잘못된 방법:

<p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is the first caption</p>
<p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> This is the third caption</p>
<p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is the second caption</p>
<p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> This is the fourth caption</p> 

이 예제에서는 세 번째 캡션이 두 번째 캡션보다 먼저 나옵니다. 전체 TTML 사양에서는 캡션을 원하는 순서대로 배치할 수 있도록 허용하지만 SDP에서 begin 값이 시간 순서대로 되어 있어야 합니다. end 값은 어떤 순서로든 나타날 수 있습니다.

앱에서 SDP 사용

다음은 SDP를 사용하여 텍스트의 스타일을 지정하고 배치하는 예제입니다. 이 예제는 두 개의 파일로 구성되어 있으며, 첫 번째 파일은 동영상을 표시하고 트랙 파일을 읽는 HTML 파일입니다. 두 번째 파일은 .ttml 파일로 저장되며 SDP 형식의 캡션을 포함합니다.

이 HTML 예제에서는 일반 동영상과 트랙 파일을 로드합니다. 이 파일은 특정 동영상에 동기화되지 않으므로 테스트를 위해 임의의 mp4 파일로 대체할 수 있습니다.


<!DOCTYPE html>
<html>
    <head>
        <title>SDP Test</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
    <body>
        <video src="video.mp4" controls muted autoplay width="800">
            <track src="SDPTest.ttml" label="SDP Examples" default/>
        </video>
    </body>
</html>


이 예제는 5초 간격으로 동영상 화면에 네 가지 다른 색 메시지를 배치하는 SDPTest.ttml 파일입니다.


<?xml version="1.0" encoding="utf-8"?>
<tt xml:lang="en-us" xmlns="http://www.w3.org/ns/ttml" 
    xmlns:s="http://www.w3.org/ns/ttml#styling" 
    xmlns:p="http://www.w3.org/ns/ttml#parameter">
  <head>
    <p:profile use="http://www.w3.org/ns/ttml/profile/sdp-us"/>
    <styling>
      <!-- define styles for text color and position --> 
      <style xml:id="bottomMidStyle" s:textAlign="center" s:textOutline="red 1px" s:backgroundColor="#ff000044" 
       s:color="#ffffffff" s:origin='20% 78%' s:extent='30% 10%'/>
      <style xml:id="topMidStyle" s:textAlign="center" s:textOutline="black 1px" s:backgroundColor="#00ff0088" 
       s:color="#ff11ffff" s:origin='20% 40%' s:extent='60% 18%'/>
      <style xml:id="topLeftStyle" s:textAlign="left" s:textOutline="blue 1px" s:backgroundColor="transparent" 
       s:color="#ff11ffff" s:origin='10% 10%' s:extent='30% 10%'/>
      <style xml:id="bottomRightStyle" s:textAlign="right" s:textOutline="black 1px" s:backgroundColor="white" 
       s:color="green" s:origin='70% 70%' s:extent='30% 10%'/>
    </styling>

    <layout>
      <!-- define regions for locating text -->
      <region xml:id="bottomMid" style="bottomMidStyle" />
      <region xml:id="topMid" style="topMidStyle" />
      <region xml:id="topLeft" style="topLeftStyle" />
      <region xml:id="bottomRight" style="bottomRightStyle" />
    </layout>
  </head>
  <body>
    <div style="defaultFont">
      <p region="bottomMid" begin='00:00:00.101' end='00:00:05.000'> This is a Pop-up caption</p>
      <p region="topMid" begin='00:00:05.000' end='00:00:10.000'> This is another Pop-up caption</p>
      <p region="topLeft" begin='00:00:10.000' end='00:00:15.000'> Hello from up top</p>
      <p region="bottomRight" begin='00:00:15.000' end='00:00:20.000'> And back down</p> 
   </div>
  </body>
</tt>


관련 항목

전문가 수준의 온라인 동영상 사용: 상호 운용 가능한 캡션에 대한 새로운 사양
선택 캡션에 대한 TTML Simple Delivery Profile(미국)

 

 

표시:
© 2015 Microsoft