HLS.js player dropping frames at discontinuities in HLS stream

I have a need to play small pieces (1 or 2 seconds) of video in various orders via HLS. Think a highlights reel from a sporting match.

Several HLS players struggle with playing a stream with discontinuities between every TS segment, but HLS.js based players appear to cope OK. The one things that does happen is sometimes, but not always, a frame is dropped following a discontinuity. It seems to happen about 70% of the time that the player drop either frame 0 or frame 1 (i.e. the 1st or 2nd frame in the TS segment).

I have experimented with different TS segment lengths, different videos, different frame rates and bit rates. The problem seems pretty consistent.

To reproduce what I’m seeing (on windows 10), create a test video at 25 FPS with FFMPEG:

ffmpeg -f lavfi -i testsrc=duration=60:size=1960x1080:rate=25 -vf "drawtext=fontsize=30:fontcolor=White:fontfile='c:\Windows\Fonts\arial.ttf':text='Frame: %{eif:mod(n,25):d}':x=2:y=2:box=1: boxcolor=0x00000000@1" -b:v 1m atestsrc.mpg

Then slice the video into 1 second long TS segments:

ffmpeg -i atestsrc.mpg -force_key_frames "expr:gte(t,n_forced*1)" -strict -2 -c:a aac -c:v libx264 -f segment -segment_list_type m3u8 -segment_list_size 0 -segment_time 1.0 -segment_time_delta 0 -segment_list atest.m3u8 seg%02d.ts

The resulting output plays back just fine, until I add the #EXT-X-DISCONTINUITY tags…

The Problem:
It looks like HLS.js based video players drop frames when playing back the m3u8 with #EXT-X-DISCONTINUITY tags – example stream here.

Firstly, you can see that it plays back a 60 second video in 58 seconds. The same symptom occurs in several different HLS.js based players, such as this one.

If you play it back at 0.1 times speed you can see that it is not rendering some frames, often frame 1:

This difference in playback speed is causing me all kinds of grief in seeking to specific places in the video. Any ideas on how to address this would be much appreciated!