FireFox 上的视频方向不正确
Video orientation is incorrect on FireFox
我有 html5 个视频标签。
在 chrome 上一切正常,在 firefox 上横向视频的方向是错误的...
即使尝试使用 video.js,也没有改变。
我了解到这是一个问题,因为这些视频源自 iOS。
所以2个问题:
1.我怎样才能克服这个问题。真的没有解决办法吗?
2.(出于好奇)- chrome 如何克服这个问题?
URL 示例(在章节中向下滚动一点以查看垂直视频):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
我猜测 Chrome 尊重 width="360"
和 height="640"
标签的 <video>
属性,而 Firefox 则不然。如果我下载了您的一个视频并在 Media Player Classic 中播放它,方向又是不正确的。但就像在网络浏览器中一样,存在不一致:在 VLC 播放器中打开的相同视频以正确的方向播放。
如果可以的话,我建议您使用名为 AVIdemux 的(免费)程序重新编码视频。我刚刚在你的一个视频上试过了,它以最小的努力运行良好。作为奖励,它可以显着降低您的视频运行k,质量损失很小。
步骤如下:
- 从 http://www.fosshub.com/Avidemux.html
下载 AVIdemux
- 安装和运行 AVIdemux
- 转到“文件”菜单并选择“打开”。选择要重新编码的视频。
- 转到“视频”菜单并选择“滤镜”
- 选择“变换”>“旋转”(双击)>“旋转 270 度”(确定)
- 单击“预览”按钮检查输出
- 单击关闭按钮
- 在主 window 中,在视频输出下,选择 MPEG4-AVC (x264)
- 在输出格式下,选择 MP4 Muxer
- 单击“保存视频”图标,然后在生成的 window 中键入文件名并单击“保存”按钮。
然后您需要重新上传您的视频。
可能不是真正可行的解决方案,但添加 CSS 规则,例如
video {
-moz-transform: rotate(90deg);
}
至少可以使视频在 Firefox 中以正确的方向播放。问题:
在没有规则的情况下以正确方向播放的视频将在有规则的情况下以错误的方向播放
视频控件也会旋转
海报显示方向错误
我看到您的网站使用 video.js。可能值得一看 https://github.com/xbgmsharp/videojs-rotatezoom ?
由于问题出在某些 iOS 特定的编码选项上,许多非 Apple 播放器无法阅读,我能想到的最简单的解决方案是对视频进行转码和旋转。
这已经在网上和 SO 的很多帖子中讨论过...例如:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I read that this is a problem because the videos originated in iOS.
使用移动设备录制的所有视频都将包含旋转元数据,包括来自iOS和Android设备的视频。 它可以取 4 个值:0(向左倾斜)、90(纵向)、180 和 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox 和 IE 10 是唯一不支持旋转元数据的主要浏览器。这是 Firefox 与 Chrome 的比较:
最新版本Firefox 42到今天还不支持。 IE11 和 Edge 12,13 确实支持它。
支持轮换信息的 mobile/desktop 玩家列表:https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
参见this answer解决方案,基本上你需要:
- 使用 FFmpeg 旋转视频(因此 Firefox 和其他不支持旋转元数据的浏览器可以正确显示视频)
- 删除旋转元数据(这样其他播放器就不会旋转视频,因为它已经被 FFmepg 旋转了)
图片提供:https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/
我有 html5 个视频标签。 在 chrome 上一切正常,在 firefox 上横向视频的方向是错误的...
即使尝试使用 video.js,也没有改变。
我了解到这是一个问题,因为这些视频源自 iOS。
所以2个问题: 1.我怎样才能克服这个问题。真的没有解决办法吗? 2.(出于好奇)- chrome 如何克服这个问题?
URL 示例(在章节中向下滚动一点以查看垂直视频):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
我猜测 Chrome 尊重 width="360"
和 height="640"
标签的 <video>
属性,而 Firefox 则不然。如果我下载了您的一个视频并在 Media Player Classic 中播放它,方向又是不正确的。但就像在网络浏览器中一样,存在不一致:在 VLC 播放器中打开的相同视频以正确的方向播放。
如果可以的话,我建议您使用名为 AVIdemux 的(免费)程序重新编码视频。我刚刚在你的一个视频上试过了,它以最小的努力运行良好。作为奖励,它可以显着降低您的视频运行k,质量损失很小。
步骤如下:
- 从 http://www.fosshub.com/Avidemux.html 下载 AVIdemux
- 安装和运行 AVIdemux
- 转到“文件”菜单并选择“打开”。选择要重新编码的视频。
- 转到“视频”菜单并选择“滤镜”
- 选择“变换”>“旋转”(双击)>“旋转 270 度”(确定)
- 单击“预览”按钮检查输出
- 单击关闭按钮
- 在主 window 中,在视频输出下,选择 MPEG4-AVC (x264)
- 在输出格式下,选择 MP4 Muxer
- 单击“保存视频”图标,然后在生成的 window 中键入文件名并单击“保存”按钮。
然后您需要重新上传您的视频。
可能不是真正可行的解决方案,但添加 CSS 规则,例如
video {
-moz-transform: rotate(90deg);
}
至少可以使视频在 Firefox 中以正确的方向播放。问题:
在没有规则的情况下以正确方向播放的视频将在有规则的情况下以错误的方向播放
视频控件也会旋转
海报显示方向错误
我看到您的网站使用 video.js。可能值得一看 https://github.com/xbgmsharp/videojs-rotatezoom ?
由于问题出在某些 iOS 特定的编码选项上,许多非 Apple 播放器无法阅读,我能想到的最简单的解决方案是对视频进行转码和旋转。
这已经在网上和 SO 的很多帖子中讨论过...例如:
Video orientation using video.js
HTML5 mp4 video with firefox resizing video
Chrome HTML5 Video Flipping Portrait Sideways
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
I read that this is a problem because the videos originated in iOS.
使用移动设备录制的所有视频都将包含旋转元数据,包括来自iOS和Android设备的视频。 它可以取 4 个值:0(向左倾斜)、90(纵向)、180 和 270:
On chrome all is good, on firefox the orientation of landscape videos is wrong...
Firefox 和 IE 10 是唯一不支持旋转元数据的主要浏览器。这是 Firefox 与 Chrome 的比较:
最新版本Firefox 42到今天还不支持。 IE11 和 Edge 12,13 确实支持它。
支持轮换信息的 mobile/desktop 玩家列表:https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/
How can I still overcome this issue. Really there is no solution?
参见this answer解决方案,基本上你需要:
- 使用 FFmpeg 旋转视频(因此 Firefox 和其他不支持旋转元数据的浏览器可以正确显示视频)
- 删除旋转元数据(这样其他播放器就不会旋转视频,因为它已经被 FFmepg 旋转了)
图片提供:https://addpipe.com/blog/mp4-rotation-metadata-in-mobile-video-files/