Streaming conference #2

1. @mzyy94
Streaming conference #2
# TELETEXT

2. WEB ENGINEER
IoT ENGINEER
SECURITY ENGINEER
EMBEDDED ENGINEER
FENNEC EVANGELIST
AND...
# ABOUT ME

3. TELETEXT?

4. ( Tele-
text)
- https://ja.wikipedia.org/wiki/

5. TELETEXT

6. https://www.youtube.com/watch?v=PnsIslM8HoI
Example #1
ここは ｼﾞｬﾊﾟﾘﾊﾟｰｸ だよ！ここは ｼﾞｬﾊﾟﾘﾊﾟｰｸ だよ！
わたしわたし
私はｻｰﾊﾞﾙ！私はｻｰﾊﾞﾙ！

7. <video playsinline controls>
<source src="video.mp4" type="video/mp4" />
<track label="cc" kind="captions" src="cc.vtt" type="text/vtt" />
</video>

8. TTML WebVTT
TELETEXT ON WEB MEDIA

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. 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. https://www.youtube.com/watch?v=xkMdLcB_vNU
Example #2

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. ON
LIVE
STREAMING
WebVTT

14. EXAMPLE #3

16. LIVE STREAMING WebVTT
HLS M3U8 PLAYLIST
#EXT-X-MEDIA:TYPE=SUBTITLES
DOM API CONTROL
CSS3 ANIMATION
Exmaple #3

17. It's also important for UX.
ENJOY TELETEXT