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:
<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:
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:
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.
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:
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:
<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:
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
Twitter
LinkedIn
GitHub
Stack Overflow
Friend Feed
7 Comments
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
Ashok, i use myFME to add the metadata, i prefer the gui than command line… http://www.mediamodus.com/flv-meta-editor
Dan
Any way to add an "end tag"
(FROM 8000 TO 10000) ???
Thanks.
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?
You can do it a number of different ways now. Take a look at this post that I did http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/ or check out the newer way of doing it with flowplayer here http://flowplayer.org/demos/events/embedded-cuepoints.html
Thank you very much Carson, i will spend all my time testing your tutorials.
Did flvtool2 supported UTF-8? Chinese Encode?
One Trackback
[...] I have mentioned the free open source flash video player FlowPlayer before in my post about adding cuepoints and create flash videos. It is a great free flash video player that you can modify yourself. After writing about adding metadata to your flash videos I decided to add support for calling javascript from FlowPlayer one cue events. The first step to modifying the FlowPlayer source is to be able to build FlowPlayer from source. [...]