video synchronization with a czml model

Dear cesium devs,

I 'm trying to synchronize a CZML file [1] with a movie [2] (random video with duration equal to the duration of my track line)

I wrote a simple HTML file to implement my Cesium-app [3]

Unfortunately, my video doesn’t go in sync with the model animation :frowning:

I built the CZML model from real data.

I resampled the sequence of time (seconds) and position (cartographicDegrees) to 1-second steps

In the CZML file the time availability is:


and in the data sequence of time and positions I have





which should be 36 minutes


So, if this is a requirement, the “time availability” in the CZML, it seems to match the video duration.

I did this trying to learn from this 2 examples [4] [5]

but what I’m really aiming to do is more like [6]

Thank you so much for any help!


As I didn’t got any answer
I’m wondering if the question I’m asking doesn’t make any sense

or if I need to provide more information or an easier way to reproduce my issue,

what I’m trying to do is:

synchronize a video with a track log (time, position), with same start-end time,

and connect both model animation and video with the cesium time slider.

thanks for any help.


Hello Massimo,

Sorry I missed your question before. It looks like your video is syncing correctly. I think the problem is you don’t have position data to fill the entire availability interval specified in your CZML file.

If you look at the top of the file, it looks like your availability is: 2015-06-19T18:11:40Z/2015-06-19T18:47:40Z. It looks like it should be changed to 2015-06-19T18:11:40Z/2015-06-19T18:32:58Z, as you said above.



Hi Hannah,

thank you so much for taking the time to look into my issue.

I fixed the error in the CZML, thanks!

Now things are working much better, but I’m still having some troubles.

the video looks like in sync with the CZML, (start, play, and fast fwd-rwd are working properly) but with an offset of 6 minutes.

If you play the demo, the time slider in cesium works just fine, but the video doesn’t start to play from the begin, it starts directly at the 6th minute

I owneder if it is problem of how I generated the video (ffmpeg from sequence of png’s, or how the browser handle the video format, or some other reasons … I’m clueless)

To make the debugging a little bit easier, I replaced the fireplace video with a sequence of printed timestamps

It is a 1 frame per second video showing the time:

from 18:11:40 to 18:33:58 for a total duration of 22’19’’

I fixed the CZML to reflect the new time:


with position :






is the total time in seconds from the start, so it should be:

22.183 seconds (which almost match the video duration)

However, when I try the demo, seems that the video has an offset of 6 minutes at the start

you can see the slider in the video player starts from 5.59 instead of 0

The demo and files are at the same link as before:

demo html:

updated CZML:

new video:

The xml part of the video is a copy from the cesium example:

Thanks for you help!


Hi Massimo,

VideoSynchronizer has an epoch option VideoSynchronizer.epoch
You should be able to use that to specify what time on the clock corresponds to the beginning of the video.



Thank You Hannah,

I added the epoch option in my synchronizer using the same exact date of the CZML file:

epoch : Cesium.JulianDate.fromIso8601(‘2015-06-19T18:11:40.00Z’),

Everything works as expected now :slight_smile: Thanks!!!

Hello, can I use subtitle tracks to synchronize an entity in a map with a video. Like this:


00:00:00.033 --> 00:00:16.049
13.71, 51.17

00:00:16.049 --> 00:00:48.081
13.68, 51.17


   <video id="video1" autoplay muted crossorigin="" controls="false" loop preload="auto">
        <source src="webm/ld_mb_stm.webm" type="video/webm" />
                    <track id="track-gps" src="vtt/ld_mb_stm_geoposition.vtt" kind="metadata" srclang="en" default>

        var video;
        document.addEventListener("DOMContentLoaded", function () { //
            video = document.getElementById("video1");
            var track = document.getElementById("track-gps");

            track.addEventListener("cuechange", function () {
                var myTrack = this.track;
                var myCues = myTrack.activeCues;
                if (myCues.length > 0) {

       //From here I don't know what to do.

            }, false);
        }, false);


Many greetings from Germany!