How to create and use Flash video metadata to add cue-points with flvtool2

Adding cue-points allows you to spice up your flash videos created with FFMpeg. Adding metadata to a FLV will allow you to introduce cue-points that have their own metadata that can be display when the cue-point is reached or let you jump to that cue-point. In the following tutorial you will learn how to add metadata to your FLV files using flvtool2 and how it is useful for adding cue-points.

Metadata is added to a FLV file with flvtool2 using the following XML format:

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 1</name>
        <timestamp>2000</timestamp><parameters><textinfo>This is some text 1</textinfo>

<thumb>test1.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 2</name>
        <timestamp>4000</timestamp><parameters><textinfo>This is some text 2</textinfo>

<thumb>test2.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
</tags>

Most of the tags are obvious but the following tags are important to point out:

• metatag - When the overwrite flag is set to true the metadata is overwritten at the given timestamp
• timestamp - This is where to put the metadata in milliseconds from the start of the FLV
• parameters - This is the metadata for the given metadata. It allows you to specify any named parameter that will then be turned into a map available to your actionscript in the flash player playing your FLV file.
• type - This specifies what this metadata is used for. The options are: navigation, event

The following syntax is used when running flvtool2:

Note that you can add any key-value pair by specifying them here. From the help the key-value pair: key:value - Key-value-pair for onMetaData tag (overwrites generated values).

After building your metadata xml file with the above syntax you would run a command like the following:

flvtool2 -AUtP mymeta.xml -thumbLocation:http://localhost/thumb test.flv

Now that you know how to create metadata and cue-points we can talk about one of the things you can do with them. With FFMpeg you can generate thumbnails of your FLV using the following command:

ffmpeg -i test.flv -an -ss 00:00:06 -r 1 -vframes 1 %d.jpg

That command tells FFMpeg to open the file test.flv with no audio support then seek to the 6th second. After seeking to the 6th second it records 1 frame at a framerate of 1. Here are the description of each option from the FFMpeg help:

• -i = input video
• -an = disable audio
• -ss = set the start time offset
• -r = set frame rate
• -vframes = number of frames to record

Now we need to put these two things together with a flash video player that will use the cue-point metadata. One such player is the open source flash video player FlowPlayer. To get the following to work you will need to have a streaming video server to stream the FLV from.

I started with the public domain video from the following page: Archive.org - Merry Melodies Fresh Hare. I encoded 17 seconds, starting at the 3rd second and ending at the 20th, of the video with ffmpeg.

wget http://www.archive.org/download/merry_melodies_fresh_hare/merry_melodies_fresh_hare.mpg
ffmpeg -ss 00:03:00 -t 00:00:20 -i merry_melodies_fresh_hare.mpg -s 320x240 -ar 22050 -r 12 test.flv

Next I created 4 thumbnails at 4 second intervals using ffmpeg at a size of 110x80 each:

ffmpeg -i test.flv -an -ss 00:00:04 -r 1 -vframes 1 -s 110x80 %d.jpg
mv 1.jpg test1.jpg
ffmpeg -i test.flv -an -ss 00:00:08 -r 1 -vframes 1 -s 110x80 %d.jpg
mv 1.jpg test2.jpg
ffmpeg -i test.flv -an -ss 00:00:12 -r 1 -vframes 1 -s 110x80 %d.jpg
mv 1.jpg test3.jpg
ffmpeg -i test.flv -an -ss 00:00:16 -r 1 -vframes 1 -s 110x80 %d.jpg
mv 1.jpg test4.jpg

The results are shown here:

I then created the following metadata xml file to specify the cue-points and the thumbnails for each:

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 1</name>
        <timestamp>4000</timestamp><parameters><textinfo>This is some text 1</textinfo>

<thumb>test1.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 2</name>
        <timestamp>8000</timestamp><parameters><textinfo>This is some text 2</textinfo>

<thumb>test2.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 3</name>
        <timestamp>8000</timestamp><parameters><textinfo>This is some text 3</textinfo>

<thumb>test3.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 4</name>
        <timestamp>8000</timestamp><parameters><textinfo>This is some text 3</textinfo>

<thumb>test4.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
</tags>

And then I added it to the FLV file:

flvtool2 -AUtP test-meta.xml -thumbLocation:/assets/cfvm-thumb test.flv

And here is the result (you need to hit play to get things started and clicking on the images will jump to the cue-points):