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 320x240 -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 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: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: flash video, flowplayer, flv