Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

# TELETEXT

3,929 views

Published on

Streaming conference #2

Published in: Technology
  • Be the first to comment

# TELETEXT

  1. 1. @mzyy94 Streaming conference #2 # TELETEXT
  2. 2. WEB ENGINEER IoT ENGINEER SECURITY ENGINEER EMBEDDED ENGINEER FENNEC EVANGELIST AND... # ABOUT ME
  3. 3. TELETEXT?
  4. 4. ( Tele- text) - https://ja.wikipedia.org/wiki/
  5. 5. TELETEXT
  6. 6. https://www.youtube.com/watch?v=PnsIslM8HoI Example #1 ここは ジャパリパーク だよ!ここは ジャパリパーク だよ! わたしわたし 私はサーバル!私はサーバル!
  7. 7. <video playsinline controls> <source src="video.mp4" type="video/mp4" /> <track label="cc" kind="captions" src="cc.vtt" type="text/vtt" /> </video>
  8. 8. TTML WebVTT TELETEXT ON WEB MEDIA
  9. 9. THE WEB VIDEO TEXT TRACKS FORMAT W3C WORKING DRAFT TELETEXT TRACK FOR WEB MEDIA TIMESTAMP TAG CASCADING STYLE SHEETS SUPPORT (PARTIAL) DOM API CONTROL WebVTT
  10. 10. THE WEB VIDEO TEXT TRACKS FORMAT W3C WORKING DRAFT TELETEXT TRACK FOR WEB MEDIA TIMESTAMP TAG CASCADING STYLE SHEETS SUPPORT (PARTIAL) DOM API CONTROL WebVTT
  11. 11. https://www.youtube.com/watch?v=xkMdLcB_vNU Example #2
  12. 12. WEBVTT 0 - Title 00:00:00.000 --> 00:00:01.800 line:50% <c.title> </c> 0 - Info 00:00:00.000 --> 00:00:01.800 line:90% align:right 1 00:00:01.800 --> 00:00:08.000 line:6 position:5% align:left <00:00:03.200><c>Wel</c><00:00:03.300><c>come</c><00:00:03.600><c> to</c><00:00:03.800><c> </c><00:00:04.000><c> </c><00:00:04.300><c> </c><00:00:04.500><c> </c><00:00:04.800><c> </c><00:00:05.000><c> </c> 2 00:00:03.600 --> 00:00:13.000 line:8 position:25% align:left <00:00:05.600><ruby> </ruby><00:00:05.800><c> </c><00:00:06.200><c> </c><00:00:06.500><c> </c><00:00:06.800> <c> </c><00:00:07.100><c> </c><00:00:07.500><c> </c><00:00:08.200><c> </c><00:00:08.800><c> </c> 3 00:00:11.000 --> 00:00:15.500 line:6 position:15% align:left <00:00:13.200><c> </c><00:00:13.900><c> </c> KARAOKE EXAMPLE
  13. 13. ON LIVE STREAMING WebVTT
  14. 14. EXAMPLE #3
  15. 15. LIVE STREAMING WebVTT HLS M3U8 PLAYLIST #EXT-X-MEDIA:TYPE=SUBTITLES DOM API CONTROL CSS3 ANIMATION Exmaple #3
  16. 16. It's also important for UX. ENJOY TELETEXT

×