如何仅翻转<video>元素视频内容而不改变控件方向？

问题背景 #

使用以下代码尝试水平翻转视频时，视频控件会和内容一起被翻转：

<video controls>
</video>

video {
  transform: scaleX(-1);
}

给video的父包裹元素添加transform: scaleX(-1)也无法解决问题，且暂时无法从零构建自定义控件，希望仅通过CSS实现仅翻转视频内容、保持控件原方向的效果。

效果对比 #

• 翻转后（控件被一同翻转）：
  
• 未翻转状态：
  

解决方案 #

通过CSS分别控制视频内容和控件的翻转状态：给video元素设置水平翻转，再针对不同浏览器的媒体控件选择器，将控件反向翻转回来，就能实现仅视频内容翻转、控件保持原方向的效果。

代码示例：

video {
  /* 翻转视频内容 */
  transform: scaleX(-1);
}

/* WebKit内核浏览器（Chrome、Safari、Edge等） */
video::-webkit-media-controls {
  /* 反向翻转控件，恢复原方向 */
  transform: scaleX(-1);
}

/* Firefox浏览器 */
video::-moz-media-controls {
  transform: scaleX(-1);
}

注意：不同浏览器的媒体控件CSS选择器可能存在差异，上述代码覆盖了主流的WebKit内核和Firefox浏览器，若需兼容更多浏览器，可补充对应选择器。

内容的提问来源于stack exchange，提问作者xinyun