html - 如何镜像 HTML5

Question

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

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

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

有什么建议？

Answer 1

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

如果您按照 HTML5 Video at w3.org 中的示例进行操作，创建起来并不难。 ，也有一些在线教程可以做到这一点，例如 Building HTML5 video controls javascript at bloken-link.com ，他们有一个 working demo .

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

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