Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

# TELETEXT

5 852 vues

Publié le

Streaming conference #2

Publié dans : Technologie
  • Soyez le premier à commenter

# 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

×