Html 可以使 <video> 镜像吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14455844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is that possible to make <video> mirrored?
提问by Sergei Basharov
Is that possible to make a video inside tag mirrored horizontally or vertically?
是否可以使标签内的视频水平或垂直镜像？
回答by PhonicUK
You can do it using a CSS3 3D transformation.
您可以使用 CSS3 3D 转换来实现。
#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.
这将围绕其 Y 轴旋转 180 度（因此您现在是从后面看它），其外观与镜像相同。
Example at http://jsfiddle.net/DuT9U/1/
回答by Craig Blagg
You can use CSS3 scaleX or scaleY set to -1 to respectively flip the video horizontally or vertically.
您可以使用设置为 -1 的 CSS3 scaleX 或 scaleY 分别水平或垂直翻转视频。
回答by Andrew
Using JavaScript, if videois the video element, to mirror (flip horizontally) you can use
使用JavaScript，如果video是视频元素，可以使用镜像（水平翻转）
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;";
回答by TechSingh
By any chance if somebody wants a working example, here is the code (with mirrored/rotated). Refer the video element #videoElement under style tag:
如果有人想要一个工作示例，这里是代码（带有镜像/旋转）。参考样式标签下的视频元素#videoElement：
<!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>
