为什么 HTML 视频标签仅在 Mozilla Firefox 中颠倒显示视频？

Question

我有一个使用 html 视频标签显示多个视频的页面。代码类似于下面的代码片段：

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

class只是一个class，动态设置宽度，高度等

该视频在除 Firefox 之外的所有浏览器中看起来和播放都非常好。网站上所有使用这些标签的视频在 Firefox 中都是颠倒的。我似乎无法在网上找到有关遇到类似问题的人的任何信息。事实上，当我使用相同的视频标签和视频扩展名等访问其他网站时，视频在 Firefox 中为我完美地显示在他们的网站上。

这里有颠倒视频的网址供参考：

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

视频在本地倒置显示，在本地服务器上，托管在真实服务器上。

如有任何帮助，我们将不胜感激。

Answer 1

这似乎与视频文件中的旋转元数据有关。这个问题可以通过转码和旋转视频来解决。相似post

Answer 2

很可能，您在没有意识到的情况下颠倒了录制视频 - 这可能会发生，例如使用智能手机相机时。

有些视频播放器可以自动更正此类内容，这可能是您没有意识到视频颠倒的原因。

有一个名为 VLC 的免费视频播放器，您可以通过旋转视频来纠正此问题。

在这里获取并安装它，如果你还没有的话： http://www.videolan.org/vlc/

步骤：

在 VLC 媒体播放器中打开视频
如果视频太短无法保留，请暂停视频运行，同时执行其他步骤
在上方菜单中，导航如下：
1. 工具
2. 视频效果
在刚刚打开的 window 中，转到几何选项卡并执行以下操作：
1. 勾选方框"Transform"
2. Select "Rotate by 180 degrees"
您的视频现在应该看起来不错并且正面朝上
要保存您的更改：
1. 在上方菜单点击，导航如下：
  1. 媒体
  2. Convert/Save
2. 选择保存文件的位置。
上传旋转的视频代替倒置的视频。
现在您的视频应该可以正确显示了:)

Answer 3

这是firefox的问题，我看到有几个人反复抱怨这个问题，但都无济于事。它只发生在从移动设备录制视频时，firefox 似乎没有使用相机细节来编码移动视频附带的旋转。大多数情况下，您必须自己找出解决方法，您可以使用 css 变换来旋转视频标签，但这样做的一个问题是它会随之旋转视频控件。

你可以使用videojs，然后添加旋转插件，你就可以google了。它将有助于旋转视频。

你可以这样做

 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 更新中还有一个最近的问题，它也压缩了移动视频。仍在寻找解决方案

为什么 HTML 视频标签仅在 Mozilla Firefox 中颠倒显示视频？

Why is an HTML video tag displaying the video upside down only in Mozilla Firefox?

html

video

firefox

mozilla