Videos in OpenLayers 3.x and above

Example on how to use videos in OpenLayers 3.x and above. This example uses OpenLayers 4.2.0.

This example adds a video in format mp4 and webm to a OpenLayers layer, then you can control it just like a normal OL layer. Also adds video controls and a custom legend to the map.

This example was initially based on the postcompose hook example by @tschaub, see http://tschaub.net/ol3-video/examples/video.html.

This example can be applied to weather forecast, satellite data and many other usages.

Running the App

Just check the index.html for details.

A live example in :

https://lcalisto.github.io/ol_videos/

Notes

To add the video

The main function to add a video is:

showAnimLayer('example.mp4', 'example.webm', bbox, map, framerate, showSeconds, opacity, legend)

For browser compatibility both mp4 and webm videos can be added. You need to provide at least one video (mp4 or webm).

bbox (required) is the bounding box array.

map (required) The map where the video is going to be displayed.

framerate (optional) is the framerate of the movie, if none or null is provided, then the default value is 1.

showSeconds (optional) Allows the user to limit the video seconds. For example, if the video has 60 seconds in total and you provide showSeconds=30 then only the initial 30 seconds will be displayed, after 30 seconds the video will start from the beginning. If none , null or 'all' is provided, then the full video will be displayed.

opacity (optional) Allows the user to specify the video opacity. If none or null is provided, then the default value is 0.5 (50%).

legend (optional) The legend must be a JSON object with at least the same number of elements as the number of displayed frames. You can customize the number of displayed frames with showSeconds variable.

To remove the video

Function removeAnimLayer(map) removes the loaded video, where map variable is the map where the video is loaded:

removeAnimLayer(map);