镜像的HTML 5视频

Question

我想在HTML 5视频上应用镜像效果。我通过应用此CSS

  transform: scale(-1, 1);
  filter: FlipH;

它可以在台式机和Web上运行，但不能在手机上运行（当我们进入全屏模式时）。

Answer 1

您可以为此使用rotateY属性而不是scale：

transform:rotateY(180deg);

Answer 2

根据this question中的@PhonicUK

这是最常用的浏览器的解决方案：

#videoElement
{
    transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg); /* Safari and Chrome */
    -moz-transform:rotateY(180deg); /* Firefox */
}

Answer 3

我认为您应该使其与所有Web浏览器兼容。尝试这样的事情：

naviframe

请参阅过滤器属性兼容性：https://caniuse.com/#feat=css-filters

Answer 4

如果可以，则应该翻转实际的源视频并保存新版本，而不要在代码中尝试。我不知道这会对手机产生什么样的性能影响，我认为全屏模式是在浏览器上下文之外，并且会因设备而异。如果您无法编辑源视频，那么请尽量使用其他答案。