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:

Usage: flvtool2 [-ACDPUVaciklnoprstvx]… [-key:value]… in-path|stdin [out-path|stdout]

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 320×240 -ar 22050 -r 12 test.flv

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

ffmpeg -i test.flv -an -ss 00:00:04 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test1.jpg
ffmpeg -i test.flv -an -ss 00:00:08 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test2.jpg
ffmpeg -i test.flv -an -ss 00:00:12 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test3.jpg
ffmpeg -i test.flv -an -ss 00:00:16 -r 1 -vframes 1 -s 110×80 %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:http://d28nuaxr58rcpu.cloudfront.net/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):

Tags: , ,

8 thoughts on “How to create and use Flash video metadata to add cue-points with flvtool2

  1. Pingback: How to build FlowPlayer from source @ IONCANNON

  2. Ashok Swamy

    Hello,

    Using flvtool2 trying to set 0.042 seconds in the timestamp tag in the xml file. the value seems to be 0. tried using 420 as well but the same. pls suggest…

    Am i missing something?

    thanks

  3. João Dias

    Finaly, a great tutorial.

    now i need to know how o get Cue points in the video loader like you can see in Revision3.com.

    They have cue poits marked in the player and, below you can point and click in the cue points text.

    Is that possible?

Leave a Reply

Your email address will not be published. Required fields are marked *