From Cajon Jams to Code: Learning m3u8 and Subtitles with My Kids

Shinya Yoshida — Sat, 26 Jul 2025 04:36:41 +0000

Recently, while working on a TV app that uses .m3u8 video files (HLS — HTTP Live Streaming), I started diving into how video content and subtitles are structured under the hood. What began as a technical exploration turned into a delightful learning experience I could share with my kids — and a foundational step toward designing creative workshops for young learners.

Why I Started Learning About .m3u8

Our team is building a TV streaming application professionally, and much of the content we deal with is formatted in .m3u8. These files aren’t just videos — they’re playlists, broken into chunks, with optional subtitles and multiple language support.

Understanding .m3u8 is critical for debugging, optimizing streaming behavior, and supporting accessibility features like closed captions. But instead of just reading docs or staring at code, I decided to try building one myself.

Step 1: Creating HLS From a Local Video

I used FFmpeg to split a local .mp4 file into .ts segments and generate a .m3u8 playlist:

ffmpeg -i video.mp4 \
  -codec: copy \
  -start_number 0 \
  -hls_time 6 \
  -hls_list_size 0 \
  -f hls video.m3u8

This gave me:

video0.ts, video1.ts, etc.
video.m3u8 — the media playlist

Step 2: Adding Subtitles with WebVTT

I created a simple .vtt file in English with timestamps. Then we made a subtitle playlist (subtitles-en.m3u8) and finally added a master.m3u8 file that linked everything:

#EXTM3U

# English subtitle track
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,LANGUAGE="en",URI="subtitles-en.m3u8"


# Main video stream
#EXT-X-STREAM-INF:BANDWIDTH=2000000,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",SUBTITLES="subs"
video.m3u8

Step 3: Sharing With My Kids 🎉

Here’s where it got fun.

We used a video of my kids playing cajon (a box-shaped percussion instrument), and I asked them to explain what they were doing. I transcribed their explanation — and had them help refine the wording.

Then we displayed the subtitles alongside the video using the hls.js demo player, and their reactions were priceless:

“That’s what I said!”
“Can we make it say it in Japanese too?”

So we translated the subtitles together and added a second .vtt file in Japanese. This turned into:

Practice with verbal storytelling
Writing and basic translation
Understanding how text syncs with time and media All wrapped in an activity that combined technology, language, creativity, and play.

Why This Matters

This was a fundamental technical experiment — but it helped me understand:

How HLS works at the file level
How subtitle tracks are defined and structured
How I might explain these systems to others — including children

And more importantly, it opened up ideas for building workshops for kids that combine media and technology.

What’s Next

I’m planning to:

Build a simple HTML player with HLS.js
Let kids record short clips, write their own subtitles, and display them
Extend into more interactive media experiments (e.g., multiple languages, karaoke-style captions, etc.)

Final Thoughts

This journey reinforced something important:

Learning becomes more meaningful when we teach and share it with others — even (or especially) with kids.

I hope this inspires someone else to try turning their learning process into a creative family or community project.

DEV Community: Shinya Yoshida