Tutorial - Video with Transport

A video can be played at different rates.

Define some HTML with the divs for the map and the transport controls.

Step 1
Active
Inactive

In addition to CSS to have the map fill the page, also style the transport controls.

Step 2
Active
Inactive

We load the video first so we can get its size and duration. It isn't possible to get the framerate, so we have to specify that.

Step 3
Active
Inactive

Set up handling of the transport controls. Reverse speeds are complicated because HTML video doesn't support them natively.

Step 4
Active
Inactive