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

【问题标题】：Why is an HTML video tag displaying the video upside down only in Mozilla Firefox?为什么 HTML 视频标签仅在 Mozilla Firefox 中颠倒显示视频？
【发布时间】：2016-12-20 03:33:52
【问题描述】：

我有一个使用 html 视频标签显示多个视频的页面。代码如下 sn-p:

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

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

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

这里是带有倒置视频的网站供参考：

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： html firefox video mozilla

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

有一些视频播放器可以自动纠正这些事情，这可能就是为什么你没有意识到视频是颠倒的。

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

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

步骤：

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

【讨论】：

【解决方案3】：

这是一个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 更新中最近出现了一个压缩移动视频的问题。仍在寻找解决方法

【讨论】：