Openlayers - Video Layer

I would like to present video (using a element) over an OpenLayers map (currently using OL4) I know that an Overlay can help me present the video on the

Solution 1:

There is a way, by using a postcompose hook. @tschaub has created an example a long time ago. See http://tschaub.net/ol3-video/examples/video.html. I have created a CodePan from it which uses the latest OpenLayers version. See http://codepen.io/anon/pen/GWQqzj.

The postcompose hook looks like this:

layer.on('postcompose', function(event) {

  var frameState = event.frameState;
  var resolution = frameState.viewState.resolution;
  var origin = map.getPixelFromCoordinate(topLeft);

  var context = event.context;
  context.save();

  context.scale(frameState.pixelRatio, frameState.pixelRatio);
  context.translate(origin[0], origin[1]);
  context.rotate(rotation);
  context.drawImage(video, 0, 0, dx / resolution, height / resolution);

  context.restore();
});

rotation is taken from the video metadata. topLeft, dx and height are calculated from the video's extent.

To loop through the frames of the video, render needs to be called on the map in an interval:

setInterval(function() {
  map.render();
}, 1000 / 30);