73

是否可以使标签内的视频水平或垂直镜像？

4

4 回答 4

146

您可以使用 CSS3 3D 转换来实现。

#videoElement
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

这会将其绕 Y 轴旋转 180 度（因此您现在从后面看它），其外观与镜像相同。

http://jsfiddle.net/DuT9U/1/上的示例

于 2013-01-22T10:08:42.150 回答
12

您可以使用 CSS3 scaleX 或 scaleY 设置为 -1 分别水平或垂直翻转视频。

于 2013-01-22T10:11:32.273 回答
9

使用 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;";

要垂直翻转，您可以使用

video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";
于 2014-05-07T23:45:48.777 回答
3

如果有人想要一个工作示例，这里是代码（带有镜像/旋转）。请参考 style 标签下的视频元素#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>
于 2018-05-31T20:39:22.730 回答