동영상에 자막제공하기

예전부터 만들어논 문서인데.. 그냥 오픈합니다.

동영상 서비스의 접근성 지침 및 가이드(WCAG2.0)

지침 1.2 시간에 기반한 미디어(Time-based Media): 시간에 기반한 미디어를 위한 대체물을 제공하라.

  1. 텍스트 콘텐츠를 이해하기 쉽게 도와주는 미디어의 역할
  2. 자막을 제공
  3. 음성 서비스(대체 콘텐츠)를 제공
  4. 설명에 대한 자막제공
  5. 수화

자막이란?

멀티미디어 콘텐츠에 대한 정보나 대화 내용, 번역 등을 콘텐츠에 동시에 보여주는 방식

자막(sami) 제공하기

SAMI

SAMI(사미, Synchronized Accessible Media Interchange; 접근성 미디어 동기화 교환)는 마이크로소프트 사에서 1998년에 발표한 미디어 접근 제안이다. 마크업 언어로 구조화되어 있으며 개인용 컴퓨터에서의 미디어 재생용 자막을 간단히 만들 수 있도록 하는 데 중점을 두고 설계되어 방송용으로는 적합하지 않다.
SAMI 문서를 전문적으로 만들 수 있는 유틸리티도 있지만, SAMI 문서는 문자열로 되어 있기 때문에 어떤 문서 편집기로도 다룰 수 있다. 파일 확장자로 .smi 혹은 .sami를 사용하는데 .smi는 SMIL 파일도 사용하는 확장자이기 때문에 서로 충돌하게 된다.  SAMI 문서에 여러 종류의 언어를 담을 수 있다.
대한민국에서는 자막 포맷으로 SAMI가 가장 많이 쓰인다.

youtube는 플래시 기반의 멀티미디어 재생기임에도 불구하고 자막 업로드를 제공하고 있다.
youtube의 자막이 보여지는 방식

youtube에 자막을 업로드...

기타 멀티미디어 업로드 사이트에서는 특별한 자막 지원여부를 확인해보지 않았다.

MEDIAPLAYER를이용해 자막을 지원하기

http://mydeute.com/tip/mov/gee.html

<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="480" height="272">
<param name="URL" value="gee.wmv">
<param name="autoStart" value="false">
<param name="captioningID" value="captions">
<param name="SAMIFileName" value="gee.smi"> 
<!--[if !IE]> <-->
<object type="application/x-ms-wmp" data="gee.wmv" width="480" height="272">
<param name="pluginspage" value="http://www.microsoft.com/Windows/MediaPlayer/">
<param name="url" value="gee.wmv">
<param name="autoStart" value="false">
<param name="captioningID" value="captions">
<param name="SAMIFileName" value="gee.smi"> 
</object>
<!--> <![endif]-->
</object>
<div id="captions" style=""> </div>
  • <param name=”captioningID” value=”captions”> : 자막이 보여질 element의 ID 지정
  • <param name=”SAMIFileName” value=”gee.smi”> : 자막 파일의 경로

대부분의 브라우저에서 자막 확인이 가능함

올바른 자막의 제공

단순한 대화나 말에 대한 자막뿐만 아니라, 상황을 이해 할 수 있는 설명도 포함 하는것이 좋다.

사용자가 쉽게 자막을 제공 할 수 있게 하는 방법

자막을 제작할 수 있는 환경을 구성한다. (동영상 업로드시)

 

이직

벌써 제가 IT 업계에서 다닌 회사가 4군데나 됩니다. 그리고 이번에 5번째 회사를 만났습니다.
이번에 적을 두게된 곳은 SK communications의 UXD센터 소속 UI개발팀입니다.

아직 입사한지 오래되지 않아 분위기나 감상이라고 할것 까지는 없지만, 좋은 회사인것같고, 저도 의욕을 앞세워 한번 열심히 해보려고 합니다. 또한 다른환경에서 색다른 일들을 해온만큼, 저도 조금은 발전하지 않았으려나요 =_=;;;

그나저나 오랜만에 회사에 출근을 했더니 적응하기가 참 힘이 드네요. 역시 놀때가 좋았습니;;;;;
또한 몰랐는데 입사해보니 아는분들이 조금있어서 놀랐고… 그나마 긴장한 저에게  큰 위안이 되었습니다 ㅋㅋ

좀 더 좋은 서비스를 만드는데 제가 조금이나마 기여할 수 있는 부분이 있으면 좋겠습니다. 그러기 위해 노력도 해야겠죠.

 

실수를 하지 않는 사람

가령 일에서 절대 실수를 하지 않는 사람이 있습니다. 어떤 사람인지 알겠습니까?
답은 ‘일하지 않는 사람’ ……

실수는 사람이 살아있다는 증거입니다. 그렇기에 열심히 노력해서 그 결과 나온 실수는 공부가 되는 겁니다.
-바텐더 13권-

누구나 처음부터 실수없이 잘하고  뛰어난 능력을 보이며 돋보이는 사람은 없습니다. 누구나 부딧히고, 실수하고, 그것들을 극복하고 노력하면서 실수를 줄여나가는것이 좋은 방향으로 가는것이 아닐까 생각해요. 그게 경험이고 경력이 아닐까요.

또한 나 자신만 너무 늦다고, 뒤쳐진다고 생각하지 마세요. 성장이 빠르던 느리던 얻을 수 있는 길은 같아요. 하지만 느리다고 자책하여 포기하면 얻을 수 있는것은 없게 되겠죠.

자바스크립트로 특정 앨리먼트에 적용된 스타일값 받아오기

웹 페이지에 정의된 모든 앨리먼트의 배경 이미지를 뽑아올 필요성을 느껴서, 언제나 그렇듯 막무가내로 자바스크립트에 손을 대기 시작했는데요..

처음에는 다음과 같이 했습니다.


element.style.backgroundImage

이랬더니 값이 없다고 나오더군요. 그래서 좀 찾아보니… css같이 외부로 스타일을 지정해 준 경우에는 값을 읽어올 수 없다고 합니다.
그래서 이것도 몰랐냐 바보야 이러면서 computedstyle 이라는게 문득 생각나면서  좀 찾아봤더니 역시 우리의 IE는


element.currentStyle.backgroundImage

이렇게 써야한다고 하더라구요…

그래서 어쩔 수 없이 분기해서 함수처럼 만들어 쓰기로 했습니다. jQuery같은 훌륭한 라이브러리쓰는 사람들은 알 필요 없겠지만; 혹시나 해서 ^_^ 남겨봅니다.

그리고 언제나 그렇듯 제 코드는 무식 그자체 입니다. 보고 욕하지마세요. 조언은 환영합니다 ㅠ_ㅠ



function getStyle(obj ,sStyle) {
    var val;
    if (obj.currentStyle) {
        val = eval("obj.currentStyle."+sStyle);
    } else {
        val = eval("window.getComputedStyle(obj,null)."+sStyle);
    }
    return val;
}

miname 님의 조언으로 코드가 좋아졌습니다!!! 감사합니다!!! ㅎㅎ
무식하면 삼대가 고생해요 ㅠ_ㅠ 아래 코멘트는 miname님의 언급이십니다*_*

아시겠지만, 보안상으로보나 성능면에서 eval is evil이잖아요.^^
property 값을 얻을 때 bracket notation([])을 쓰면 eval 사용을 피할 수 있습니다.
아래처럼요.


function getStyle(el, sStyle) {
  var computedStyle;
  if (el.currentStyle) {
  computedStyle = el.currentStyle;
  } else {
  computedStyle = window.getComputedStyle(el, null);
  }
  return computedStyle[sStyle];
 }

만약에 위 function이 여러번 반복적으로 실행되는 상황이라면 아래처럼 바꿔서 두 번째부턴 더 빠르게 실행될 수 있도록 할 수 있을 겁니다.


function getStyle(el, sStyle) {
  if (el.currentStyle) {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = el.currentStyle;
     return computedStyle[sStyle];
   };
  } else {
   getStyle = function(el, sStyle) {
     var computedStyle;
     computedStyle = window.getComputedStyle(el, null);
     return computedStyle[sStyle];
   };
  }
  getStyle(el, sStyle);
 }

p.s 파젯을 KWCAG2.0 버전으로 조금 바꾸고 있습니다 ㅎㅎ 그중에 하나만들다가 이게 나온것이에요.
아시는분들만 안다는 파젯 사용방법을 아시는 분은 새로운 파젯 개발버전인 http://mydeute.com/was/pajet.js 으로 변경해서 확인 가능합니다 ㅋㅋㅋㅋ

닥치고 웹 표준