如何镜像<video> HTML5

Question

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

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

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

有什么建议吗？

Answer 1

如果问题是视频与控件一起被镜像，那么不要对视频使用默认控件，使用javascript创建那些控件。

如果您遵循HTML5视频网站w3.org的示例，创建并不难，也有一些在线教程可以这样做，比如构建HTML5视频控件，它们有一个工作演示。

这也将给您提供独立设置视频控件样式的自由，这样您就可以决定使用css在这些控件上应用什么转换。如果您想要模拟原始控件，您可以考虑让它们出现在悬停状态，并使用css动画使它们淡出。

增编:看看VideoJS，这是一个很好的解决方案。不过，您将不得不试验您的转换。

Answer 2

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

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

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