Timed Metadatada

When ID3 metadata is first encountered in a media stream, Viblast Player will automatically expose it by creating a new Text Track with kind='metadata' and label='Viblast Metadata Tags'. This allows for differentiating different kinds of metadata and for easy integration with code that already works with Text Track objects.

It is highly recommending that you make yourself familiar with the way text tracks are handled in javascript. There are lots of guides and references around the web.

Obtaining the Metadata Text Track

Using the HTML5 Api

var metadataTrack = document.getElementById('myVideo').textTracks[0]; // assumes that there is only a single text track

Using the VideoJS Api

var metadataTrack = videojs('#myVideo').textTracks()[0]; // assumes that there is only a single text track

ID3 Tags in the Text Track

For each ID3 Tag a cue is created and added to the metadata text track. The most importaint fields of the cue object are:

• startTime: the time in seconds when the cue becomes relevant.
• text: always equal to ID3 Tag. This value marks the cue as representing and ID3 Tag
• frames: a list of objects one for each ID3 Frame in the tag. Each object as a filed called id that is equal to the ID3 Frame identifier. See below for the structure of each frame.

Text Information and TXXX Frames

{
    id: For example 'TXXX' or 'TIT2',
    description: only-for TXXX frames,
    text: equal to the url of the frame,
}

Url Link and WXXX Frames

{
    id: For example 'WXXX' or 'WPAY',
    description: only-for WXXX frames,
    url: equal to the url of the frame,
}

Comment Frames

{
    id: 'COMM',
    lang: 3 letter language code,
    description: a string that represents a short description,
    text: the comment itself,
}

Private frames

{
    id: 'PRIV',
    owner: the owner identifier,
    data: a Uint8Array object that contains the private data as seen in the media stream without any modifications,
}

Other frames

{
    id: the identifier of the frame,
    rawContent: a Uint8Array object that contains the frame content as seen in the media stream without any modifications,
}

Realworld Example Metadata Text Track

{
    kind: "metadata",
    label: "Viblast Metadata Tags",
    cues: [
        {
            startTime: 0,
            frames: [
                {
                    id: "PRIV",
                    owner: "com.apple.streaming.transportStreamTimestamp",
                    data: Uint8Array[8]
                }
            ]
        },
        {
            startTime: 0.6501,
            frames: [
                {
                    id: "TRSO",
                    text: "My Cool Radio FM",
                },
                {
                    id: "TIT2",
                    text: "My Favorite Song",
                },
                {
                    id: "TPE1",
                    text: "My Favorite Artist",
                },
                {
                    id: "WXXX",
                    description: "artworkURL"
                    text: "http://www.myserver.com/img/my-cool-radio-logo.png",
                }
            ]
        },
        // ... and so on
    ]
}

See it in action

See the Pen ID3 Metadata Support by Viblast (@Viblast) on CodePen.