为什么HTML视频标签在Mozilla Firefox中只会倒置显示视频？

Question

我有一个页面，使用HTML视频标签显示多个视频。 代码如下所示：

<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>

这个类只是一个动态设置宽度、高度等属性的类。

视频在所有浏览器中看起来和播放起来都很好，除了Firefox。在Firefox中，使用这些标签的网站上的所有视频都是倒置的。我似乎找不到有关人们遇到类似问题的任何在线信息。事实上，当我访问其他使用相同视频标签和视频扩展等元素的网站时，在Firefox中视频在他们的网站上完美显示。

以下是参考的视频倒置的网站：

http://www.larrykrannich.com/video.html

这些视频在本地环境、本地服务器以及实际服务器上都会倒置显示。

任何帮助都将不胜感激。

- cbrawl

Answer 1

这是一个Firefox的问题，我已经看到有几个人一再抱怨这个问题，但都没有解决。当视频从手机录制时才会出现这种情况，Firefox似乎没有使用与移动视频一起传送的相机详细信息来编码旋转。暂时只能自己寻找解决方法，可以使用CSS转换来旋转视频标签，但问题是它将带着视频控件一起旋转。

您可以使用videojs，然后添加旋转插件，您可以在谷歌上搜索它。它将帮助您为视频旋转。

您可以像这样做：

 if ( isfirefox ) {

    <video  class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
        <source src="video-source" type="video/mp4">         
  </video>

} 

另外，最近 Chrome 更新中存在一个问题，会压缩移动设备上的视频。我们仍在寻找解决方法。

- Ibukun Ibukun

Answer 2

这似乎与视频文件中的旋转元数据有关。可以通过转码和旋转视频来解决问题。类似的帖子在这里。

- user2762354

Answer 3

很可能，您没有意识到自己录制的视频是倒置的-这种情况可能发生在使用智能手机相机时。

有些视频播放器可以自动纠正这种情况，这也许就是您没有意识到视频倒置的原因。

有一个名为VLC的免费视频播放器，您可以通过旋转视频来进行修正。

如果您还没有安装它，请从此处获取并安装： http://www.videolan.org/vlc/

步骤：

1. 在VLC媒体播放器中打开视频
2. 如果视频太短而无法持续运行，请暂停视频，同时执行其他步骤
3. 在上方菜单中导航如下：
   1. 工具
   2. 视频效果
4. 在刚打开的窗口中，转到几何选项卡并执行以下操作：
   1. 勾选“变换”框
   2. 选择“旋转180度”
5. 现在您的视频应该看起来很好，正面朝上
6. 要保存更改：
   1. 在上方菜单中单击，导航如下：
      1. 媒体
      2. 转换/保存
   2. 选择要保存文件的位置。
7. 将旋转后的视频上传以替换倒置的视频。
8. 现在您的视频应该正确显示 :)

- doh-nutz