WebVTT

WebVTT
WebVTT
파일 이름 확장명
.vtt
인터넷 미디어 유형
텍스트/vtt
개발자월드 와이드 웹 컨소시엄(W3C)
초기 릴리즈2010년 8월 10일; 11년 전(2010-08-10)[1]
최신 릴리즈
2019년 4월 4일; 2년 전(2019-04-04)
형식 유형시간 지정 텍스트
연장 위치SRT
표준W3C WebVTT
오픈 포맷?네
자유 형식?네
웹사이트(VTT)

WebVTT(Web Video Text Tracks)는 HTML5와 관련하여 시간제한 텍스트를 표시하기 위한 W3C(World Wide Web Consortium) 표준이다. <track> 원소의

이 규격의 초안은 HTML5가 지원해야 하는 캡션 형식에 대한 논의를 거쳐 2010년에 WHTWG에 의해 작성되었다. 즉, 상대적으로 성숙한 XML 기반 TTML(Timed Text Markup Language) 또는 널리 사용되는 SubRip 형식에 기초한 완전히 새롭지만 더 가벼운 표준이다. 최종 결정은 처음에 WebSRT(Web Subscription Resource Tracks)라고 불리는 새로운 표준에 대한 것이었다.[2] 그것은 공유했다. .srt 파일 확장명이며, 파일 확장명은 완전히 호환되지는 않지만 대체로 서브립 형식에 기초하였다.[3] 예비 포맷은 나중에 WebVTT로 이름이 바뀌었다.[4][5] 2011년 1월 13일 버전의 HTML5 초안 보고서에서는 <track> 요소가 도입되었고 WebVTT 큐 텍스트 렌더링 규칙을 문서화하도록 사양이 업데이트되었다.[6] WebVTT 사양은 아직 초안 단계에 있지만 기본 기능은 이미 모든 주요 브라우저에서 지원되고 있다.

서브립과의 주요 차이점

  • WebVTT의 첫 번째 줄은 선택적 UTF-8 바이트 순서 표시 후 WEBVTT로 시작한다.
  • 첫 번째 줄과 첫 번째 큐 사이에 선택적 헤더 데이터를 위한 공간이 있음
  • 시간 코드 부분 값은 쉼표 대신 완전 중지(Full Stop)로 구분
  • 시간 코드 시간은 선택 사항.
  • 시간 코드 앞에 있는 프레임 번호 지정/식별은 선택 사항이다.
  • NOTE라는 단어로 식별된 코멘트를 추가할 수 있음
  • 메타데이터 정보는 JSON 스타일 형식으로 추가할 수 있음
  • 장 정보를 선택적으로 지정할 수 있음
  • UTF-8로 확장 문자만 지원
  • C 태그에 대한 동반 HTML 문서에 정의된 별도의 파일에 있는 CSS가 FONT 요소 대신 사용된다.
  • 큐 설정을 사용하여 비디오에서[7] 큐 위치를 사용자 지정할 수 있음

호환성.

브라우저 지원[8][9]
브라우저 큐 텍스트 태그 큐 포지셔닝 CSS 스타일링
크롬 35+
안드로이드 스톡 브라우저 5.0+
오페라 22+
사파리 7+(iOS: 8+)
파이어폭스 31+(안드로이드: 32+) 해당 없음
마이크로소프트 에지 12+ 해당 없음
인터넷 익스플로러 10+ 해당 없음

Firefox는 야간 빌드(Firefox 24)에 WebVTT를 구현했지만 초기에는 기본적으로 활성화되지 않았다. 이 기능은 파이어폭스에서 "about:config" 페이지로 이동하여 "media"의 값을 설정함으로써 활성화되어야 했다.webtt.enabled"를 true로 변경.[10] 유튜브는 2013년 4월부터 WebVTT를 지원하기 시작했다.[11] 2014년 7월 24일 현재 모질라는 기본적으로 Firefox에서 WebVTT를 사용하도록 설정하였다.[12]

.vtt 파일의 자막은 온라인으로 표시되지만 로컬 드라이브에 저장되면 표시되지 않는다.

WebVTT 형식의 예

WEBVTT Kind: 캡션 언어: en 00:09.000 --> 00:11.000 <v Roger Bingham>우리는 뉴욕시 00:11.000 --> 00:13.000 <v 로저 빙엄>에 있다.우리는 뉴욕시 00:13.000 --> 00:16.000 <v 로저 빙엄>에 있다.우리는 실제로 00:16.000 --> 00:18.000 <미국 자연사 박물관 00:18.000 --> 00:20.000 <로저 빙엄> 바로 아래 루세른 호텔에 와 있다.그리고 나와 함께 닐 드 그라세 타이슨 00:20.000 --> 00:22.000 <v 로저 빙햄>이 있다.천체물리학자, 헤이든 플라네타리움 00:22.000 --> ALBH 00:24.000의 00:24.000 <v 로저 빙엄> 00:26.000 <v 로저 빙엄>여기까지 걸어와 줘서 고마워. 00:27.000 --> 00:30.000 <v 로저 빙엄>그리고 나는 우리가 했던 마지막 대화를 추적하고 싶다.  00:30.000 --> 00:31.500 align:end size:50% <v Roger Bingham>우리가 이메일을 보냈을 때—00:30.500 --> 00:32.500 align:start size:50% <v Neil deGrasse Tyson> 그 대화에서 충분히 얘기하지 않았는가?  00:32.000 --> 00:35.500 aline:end size:50% <v Roger Bingham> no! 아니오. 'cos 'cos 00:32.500 --> 00:33.500 align:start size:50% <v Neil deGrasse Tyson><i><웃음 (>) 00:35.500 -- 00:38.000 <v Roger Bingham>내가 너무 신나서 안경이 떨어지는 거 알잖아.

[13]

기타 기능

2013년 6월, 새로운 "지역" 설정을 포함하는 명세서에 예가 추가되었다.[14] 이 기능은 Firefox 59[15] 이후 지원되지만 다른 브라우저에서는 지원되지 않는다.[16]

참조

  1. ^ "WebSRT". Archived from the original on 2010-08-16. Retrieved 2015-02-12.
  2. ^ "WebVTT versus TTML: XML considered harmful for web captions?". Retrieved 16 February 2015.
  3. ^ WHTWG HTML 초안 사양에서 WebSRT가 2010-10-14를 검색함
  4. ^ Kennedy, Antony; de Leon, Inayaili (2011). Pro CSS for High Traffic Websites. Apress. ISBN 978-1-4302-3288-9.
  5. ^ Pfeiffer, Silvia (June 27, 2011). "Recent developments around WebVTT".
  6. ^ http://www.w3.org/TR/2011/WD-html5-20110113/
  7. ^ "WebVTT cue settings". W3C. Retrieved 11 February 2015.
  8. ^ "WebVTT support in browser". W3C. Retrieved 6 February 2017.
  9. ^ "WebVTT Styling". JWPlayer. Retrieved 6 February 2017.
  10. ^ "Implement the track element".
  11. ^ "Caption File - YouTube Help".
  12. ^ "Firefox 31 Release Notes".
  13. ^ "WebVtt: The Web Video Text Tracks Format". w3.org. The World Wide Web Consortium. 10 May 2018. Retrieved 16 September 2018.
  14. ^ "Added region example to Introduction section under "Other features" – GitHub commit details". GitHub.
  15. ^ https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#Notes
  16. ^ https://developer.mozilla.org/en-US/docs/Web/API/VTTCue#Browser_compatibility