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 examples adds a video in format mp4 and webm to a OpenLayers layer. Also this adds video controls and a custom legend to the map.

This usage can be important for weather forecast, satellite data and many other usages.

Running the App

Just check the index.html for details.

A live example in :

https://htmlpreview.github.io/?https://github.com/lcalisto/ol_videos/blob/master/index.html

Notes

The main function is:

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

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 bonding box array.

map (required) The map were 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 only limit the video. For example if the video as 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 same number of elements as the number of displayed frames. You can customize the number of displayed frames with showSeconds variable.

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

removeAnimLayer(map);