如何为HLS流注入字幕？含WebVTT格式及RTMP示例参考

Hey there! Let’s break down your two HLS subtitle questions clearly, focusing on WebVTT since that’s your target format. I’ve worked with both RTMP and HLS subtitle workflows, so I’ll tie the RTMP context you mentioned directly to HLS solutions.

1. How to Inject Subtitles into an HLS Stream? #

The approach depends on whether you’re working with pre-recorded VOD or live HLS streams—here’s how to handle both:

For Pre-Recorded VOD HLS Streams #

If you’re dealing with already encoded video (or need to convert a video to HLS with subtitles), the process boils down to generating a valid WebVTT file and linking it to your HLS playlist.

Step-by-Step:

• 1. Prepare your WebVTT subtitle file
  Make sure it follows the standard WebVTT structure—here’s a quick example:

  WEBVTT
  
  00:00:00.000 --> 00:00:02.000
  Hey, this is your first subtitle line!
  
  00:00:02.500 --> 00:00:05.000
  And here’s the second one.
  

• 2. Use FFmpeg to package video + subtitles into HLS
  If your source video isn’t already in HLS, run this command to encode it and attach the WebVTT subtitles as a separate track (users can toggle subtitles on/off):

  ffmpeg -i input.mp4 -i subtitles.vtt -c:v copy -c:a copy -c:s webvtt -map 0 -map 1 -f hls -hls_time 10 -hls_list_size 0 -master_pl_name master.m3u8 output/stream_%v.m3u8
  

  This generates a master.m3u8 playlist that explicitly references the video, audio, and subtitle tracks.
• 3. Add subtitles to an existing HLS stream
  If you already have an HLS playlist, edit the master m3u8 file to add this line (pointing to your WebVTT file):

  #EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="English",DEFAULT=YES,AUTOSELECT=YES,URI="subtitles.vtt"
  

  Just make sure the WebVTT file is hosted in the same directory as your HLS segments for proper loading.

For Live HLS Streams #

Live workflows require real-time subtitle handling—FFmpeg is still your go-to tool, and you have two main options:

Option 1: Hardcode Subtitles (Embed into Video Frames)

If you want subtitles permanently visible (like your RTMP hard-sub workflow), use the subtitles filter with a reload flag to pick up real-time subtitle updates:

# Pull from an RTMP source, overlay live WebVTT subtitles, output HLS
ffmpeg -i rtmp://your-live-source -vf "subtitles=live_subs.vtt:reload=1" -c:v libx264 -c:a aac -f hls -hls_time 2 -hls_list_size 5 -hls_flags delete_segments output/live.m3u8

The reload=1 parameter tells FFmpeg to check the live_subs.vtt file for changes every second, perfect for live captioning.

Option 2: Soft Subtitles (Independent Track)

For toggleable subtitles (matching RTMP soft-sub workflows), generate a separate WebVTT subtitle stream and link it in your HLS master playlist. You can use FFmpeg to package the live video and subtitle stream together:

ffmpeg -i rtmp://your-live-source -i live_subs.vtt -c:v libx264 -c:a aac -c:s webvtt -map 0 -map 1 -f hls -hls_time 2 -hls_list_size 5 -master_pl_name master_live.m3u8 output/live_stream_%v.m3u8

This creates a master playlist that includes the subtitle track, so players like hls.js or Safari will automatically show a subtitle toggle option.

2. Adapting Your Existing RTMP Subtitle Workflow to HLS (WebVTT) #

You mentioned you have an RTMP subtitle injection setup—let’s map that directly to HLS WebVTT:

If Your RTMP Workflow Uses Hard Subtitles #

RTMP hard subs embed text directly into video frames. For HLS, the equivalent is using FFmpeg’s subtitles filter as shown above. The command will overlay your WebVTT subtitles onto the live stream, resulting in HLS segments with permanent subtitles—no extra files needed.

If Your RTMP Workflow Uses Soft Subtitles #

RTMP soft subs are usually sent as metadata or a separate track. For HLS, the standard approach is to use external WebVTT tracks (since HLS doesn’t support embedded subtitle metadata like RTMP does). Here’s how to replicate the workflow:

1. Extract or generate WebVTT from your subtitle source
   If your RTMP stream includes subtitle metadata, use FFmpeg to pull it out and convert to WebVTT:

   ffmpeg -i rtmp://your-live-source -map 0:s:0 -c:s webvtt live_subs.vtt
   

2. Package into HLS with a subtitle track
   Use the FFmpeg command from the live soft subtitle section above to create a master playlist that links the video stream and WebVTT track. This lets users toggle subtitles just like they would with your RTMP setup.

Key Difference to Note #

RTMP soft subs often rely on proprietary metadata formats, but HLS uses open WebVTT files linked via m3u8 playlists. This is more compatible across devices and players—all modern browsers and media players support WebVTT+HLS natively.

内容的提问来源于stack exchange，提问作者Shane Hsu