是否可以使<video>镜像？

Question

是否可以使<video>镜像？

是否可以在标签中水平或垂直镜像？

Answer 1

您可以使用CSS3 3D转换来完成.

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

Run Code Online (Sandbox Code Playgroud)

这将围绕其Y轴旋转180度(因此您现在从后面看它),其外观与镜像相同.

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

@Veger - 如果你将它旋转180度,你就可以将它翻转一半,这意味着你从后面看它.这提供了与镜像相同的外观.您可以旋转X(180度)以提供从上到下镜像的外观.亲自尝试看看吧. (6认同)
旋转对象与镜像不同! (5认同)
不...翻转就像照镜子一样，所有的 x（或 y）坐标都被交换了。旋转它对所有坐标应用更复杂的公式。注意：水平*和*垂直翻转等于旋转180度。（但这是“巧合”），请参阅 [此页面](http://www.cs.nott.ac.uk/~smx/IVIPracticals/exercise1.html) 以进行图形比较。 (2认同)
@Verger，如果它具有相同的外观，那么任何技术细节都无关紧要。而且由于使用 CSS '翻转'某些东西的唯一另一种方法是使用负比例，所以它非常没有实际意义。它都是硬件加速的，因此也没有性能差异。 (2认同)
是的，它可以-旋转180度使其看起来像镜像-http://jsfiddle.net/DuT9U/1/ (2认同)

Answer 2

小智 10

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

Answer 3

And*_*rew 6

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

Run Code Online (Sandbox Code Playgroud)

要垂直翻转,您可以使用

video.style.cssText = "-moz-transform: scale(1, -1); \
-webkit-transform: scale(1, -1); -o-transform: scale(1, -1); \
transform: scale(1, -1); filter: FlipV;";

Run Code Online (Sandbox Code Playgroud)

Answer 4

Tec*_*ngh 6

无论如何，如果有人想要一个工作示例，这里是代码（带有镜像/旋转）。请参考样式标签下的视频元素#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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，7 月前
查看次数：	22465 次
最近记录：	7 年，9 月前