html - 如何镜像HTML5

Question

如何在 HTML5 中镜像元素？我首先尝试使用带有缩放/旋转的 CSS 转换，但不幸的是，这也将控件镜像到了视频元素。我只希望视频本身被镜像。

从技术上讲，我可以使用画布，将视频绘制到画布上，并通过一些图像处理对其进行镜像，但这对于如此简单的事情来说似乎过于复杂/浪费。

我需要这个的原因是因为我正在接受网络摄像头输入，不幸的是它是镜像的，这对我的用户来说有点不直观。我对此图像进行了一些图像处理并显示结果。如果我可以在不镜像控件的情况下镜像视频，那么一切正常。

有什么建议么？

Answer 1

如果问题是视频与控件一起镜像，则不要使用视频的默认控件，而是使用 javascript 创建这些控件。

如果您按照w3.org 上的 HTML5 视频中的示例进行创建并不难，也有一些在线教程可以做到这一点，例如在 bloken-link.com 上构建 HTML5 视频控件 javascript，他们有一个工作演示。

这也将使您可以自由地独立设置视频控件的样式，因此您可以决定使用 css 对其应用哪些转换。如果您想模仿原始控件，您可以考虑让它们出现在悬停时并使用 css 动画使它们淡出。

---

附录：查看VideoJS，这是一个非常好的解决方案。不过，您将不得不尝试您的转换。

Answer 2

我用以下css解决了这个问题：

#container{
  -webkit-appearance: none;
  transform: rotateY(180deg);
}

#container video::-webkit-media-controls{
  transform: rotateY(180deg) !important;
}