Support EXT-X-DATERANGE

[ramoncaldeira]

In WWDC2016[1] Apple announced In-Playlist Timed Metadata as an alternative to ID3 Timed Metadata. As far as I understood, the main idea is to use the m3u8 tag EXT-X-DATERANGE to describe the timed metadata in plain text on the playlist file, outside the video stream.

I think it would be great to have this feature implemented in the hls.js library, because that way it will no longer be necessary to use the Apple-only mediafilesegmenter tool to inject timed ID3 into video streams.

[1] https://developer.apple.com/videos/play/wwdc2016/504/

[johnBartos]

Will do

[robwalch]

I removed the milestone for this as I think we can get it into a minor release or v1.0.0. There isn't much of a difference.

Sample streams are welcome!

It would be helpful to know if anyone has seen this metadata surface as DataCues in metadata TextTracks in Safari (as ID3 does). I heard that was introduced in a recent release but still haven't seen it myself. The goal for this work would be to surface EXT-X-DATERANGE the same way Safari does.

You can get at this information now in hls.js via hls.levels[].details.fragments[].tagList[]['EXT-X-DATERANGE', AttributesString] which you can get with accurate timing as early as the first FRAG_BUFFERED event . You just have to parse the attributes yourself.

[jpatallah]

Based on your last comment are you recommending: getting the tag from the fragment, checking the start-time, and then triggering the event based on EXT-X-PROGRAM-DATE-TIME + video duration?

It would be super helpful to have this as a timed metadata event.

[robwalch]

Based on your last comment are you recommending: getting the tag from the fragment, checking the start-time, and then triggering the event based on EXT-X-PROGRAM-DATE-TIME + video duration?

Yes (almost). Video duration is not part of the calculation. In v1.0, each fragment has a programDateTime and a start when it's part of a playlist containing EXT-X-PROGRAM-DATE-TIME. The "PROGRAM-DATE-TIME" (in seconds) at video.currentTime is:

frag.programDateTime / 1000 + (video.currentTime - frag.start)

This is what is required currently to generate your own metadata cues or events. The comment above, and these details shared here are tips for implementing your own events or working with PDT. You could also use this information to develop this feature in hls.js, use it in your own fork, and upstream it for a future release. This change would go well in the next minor which includes other timed metadata features like emsg extraction.

It would be super helpful to have this as a timed metadata event.

The goal of this issue is to expose EXT-X-DATERANGE in a "metadata" TextTrack in the same way that Safari does. You would use the same video.textTrack[].mode = 'hidden', cues, activeCues and video.textTrack[].oncuechange listener to capture timed metadata as with HTML5 video in Safari with HLS streams.

[jercul79]

use the same video.textTrack[].mode = 'hidden', cues, activeCues and video.textTrack[].oncuechange listener

Hi, I am dealing with a similar problem. Are there any sample streams and sample code to test video.textTrack[] with both hls.js and native Safari video element? I am trying to get cue events firing on native Safari video elements, but failing miserably.

Thanks,
Jeremy