如何在 HTML5 中镜像元素?我首先尝试使用带有缩放/旋转的 CSS 转换,但不幸的是,这也将控件镜像到了视频元素。我只想镜像视频本身。
从技术上讲,我可以使用 Canvas ,将视频绘制到 Canvas 上,并通过一些图像处理进行镜像,但这对于如此简单的事情来说似乎过于复杂/浪费。
我需要这个的原因是因为我正在接受网络摄像头输入,不幸的是它是镜像的,这对我的用户来说有点不直观。我对这个图像执行一些图像处理并显示结果。如果我可以在不镜像控件的情况下镜像视频,那么一切都会正常。
有什么建议?
最佳答案
如果问题是视频与控件一起镜像,则不要使用视频的默认控件,而是使用 javascript 创建这些控件。
如果您按照 HTML5 Video at w3.org 中的示例进行操作,创建起来并不难。 ,也有一些在线教程可以做到这一点,例如 Building HTML5 video controls javascript at bloken-link.com ,他们有一个 working demo .
这也将使您可以自由地独立设置视频控件的样式,因此您可以决定使用 css 对它们应用哪些转换。如果你想模仿原来的控件,你可以考虑让它们出现在悬停时,并使用 css 动画让它们淡出。
附录:查看 VideoJS ,这是一个很好的解决方案。不过,您将不得不尝试您的转换。
关于html - 如何镜像 <video> HTML5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19614624/