javascript - 如何使用 css 在 chrome mobile 上翻转视频（在全屏模式下）？

Question

我正在开发一个网络应用程序，其主要目的是流式传输舞蹈视频，而我仅在 chrome 移动设备中遇到了这个问题，它在 Firefox 移动设备和其他所有桌面浏览器中都能完美运行。

问题是我需要能够翻转 html5 视频元素并且它可以工作......好吧，它可以工作直到我全屏显示，然后它会停留几秒钟并恢复到原始视频（未翻转）。

我正在使用 css “transform: scaleY(-1)” 属性。

我已经尝试将此属性设置为视频标签、上层 div、视频标签和请求全屏的 div。并且请求全屏但没有成功的div。如果我设置 scale(); 对于 0 和 1 之间的任何正数，它似乎可以解决问题，但它不适用于负数。

我知道 UA css :not(:root):-webkit-full-screen {transform: none !important}，但这似乎不是问题。我宁愿说它与 chrome 在全屏模式下处理视频的方式更相关。

任何帮助，将不胜感激。如果我不能让它工作，我将不得不为另一个流提供每个视频的镜像版本。

在此先感谢，如果您需要任何示例，请不要犹豫。

标签： javascripthtmlcssgoogle-chromedom