html - 如何镜像 <video> HTML5

标签 html html5-video

如何在 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/

相关文章:

javascript - 更改 highcharts 数据标签位置

javascript - 在 jQuery 日期中将 0 添加到月份

html - 响应式 adsense 单元的最小高度

html - 仅旋转 div 元素中的文本(不是 div)

css - 在 Chrome 中调整视频宽度以删除黑条

Internet Explorer 8 中的 HTML5 视频

javascript - 无法使用 javascript 获取 HTML4 中的 HTML5 视频 id?

security - UDEMY 等公司如何保护视频不被下载

android - android中检测flash和html5的代码

html - 显示图像的文本浏览器显示 "QFSEngine::open: No file specified "警告