How to mirror a <video> HTML5

Question

How can I mirror a element in HTML5? I first tried using CSS transformations with scale/rotate, but that unfortunately mirrors the controls to the video element as well. I just want the video itself to be mirrored.

I can technically use a canvas, draw the video onto the canvas, and mirror that with some image manipulation, but that seems overly complicated/wasteful for something so simple.

The reason I need this is because I'm taking webcam input and unfortunately it's mirrored, which is slightly unintuitive for my user. I perform some image processing on this image and display the result as well. If I can mirror the video without mirroring the controls, then everything works out.

Any suggestions?

Answer 1

If the problem is that the video gets mirrored along with the controls, then don't use the default controls for the video, create those with javascript.

It is not hard to create if you follow the examples at HTML5 Video at w3.org, also there are some online tutorials to do just that, such as Building HTML5 video controls javascript at bloken-link.com, they have a working demo.

This will also give you the freedom to style the controls of the video independently, so you can decide what transformations to apply on them with css. If you want to mimic the original controls, you may consider to make them appear on hover and use css animations to make them fade out.

---

Addendum: Check out VideoJS, it is a very good solution that makes just that. You will have to experiment with your transformations though.