Is that possible to make a video inside tag mirrored horizontally or vertically?
5 Answers
You can do it using a CSS3 3D transformation.
#videoElement
{
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
}
This will rotate it 180 degrees around its Y axis (so you're now looking at it from behind) which gives the same appearance as being mirrored.
Example at http://jsfiddle.net/DuT9U/1/
-
9
-
12@Veger - if you rotate it 180 degrees, you've flipped it half-way-around, which means you're looking at it from behind. This gives the same appearance as being mirrored. You can rotateX(180deg) to give the appearance of being mirrored top-to-bottom as well. Try it yourself and see.– PhonicUKCommented Jan 22, 2013 at 10:55
-
2No... Flipping is like looking in a mirror, all x (or y) coordinates are swapped. Rotating it applying a more complex formula to all coordinates. Note: flipping horizontally and vertically is equal to rotating 180 degrees. (But this is 'coincidence'), See this page for a graphical comparison.– VegerCommented Jan 22, 2013 at 11:02
-
6@Verger, if it gives the same appearance then any technicalities are irrelevant. And since the only other way to 'flip' something with CSS is by using a negative scale then it's pretty moot. It's all hardware accelerated so there's no performance difference either.– PhonicUKCommented Jan 22, 2013 at 11:08
-
2Yes it does - rotating 180 degrees makes it look mirrored - jsfiddle.net/DuT9U/1– PhonicUKCommented Jan 22, 2013 at 11:17
You can use CSS3 scaleX
or scaleY
set to -1 to respectively flip the video horizontally or vertically.
Using JavaScript, if video
is the video element, to mirror (flip horizontally) you can use
video.style.cssText = "-moz-transform: scale(-1, 1); \
-webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); \
transform: scale(-1, 1); filter: FlipH;";
To flip vertically you can use
video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
-
1Interesting, does the flip inflict a performance penalty for video? Commented Oct 1, 2017 at 6:57
-
@MichaelIvanov In my experience I haven't really noticed performance penalties– AndrewCommented Oct 2, 2017 at 0:44
By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
/*Mirror code starts*/
transform: rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Safari and Chrome */
-moz-transform:rotateY(180deg); /* Firefox */
/*Mirror code ends*/
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
var video = document.querySelector("#videoElement");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
</script>
</body>
</html>
to prevent rotating controls
video {
transform: scale(-1,1);
}
video::-webkit-media-controls-panel {
transform: scale(-1,1);
}
-
I could not manage to make it work for Firefox. Do you have a tip for this?– LirisCommented Dec 5, 2023 at 16:23