我有视频的html5视频标签。在chrome上一切都很好,在firefox上风景视频的方向是错误的。。
即使尝试使用video.js,也没有变化。
我读到这是一个问题,因为视频起源于iOS。
所以有两个问题:1.我怎么还能克服这个问题。真的没有解决方案吗?2.(出于好奇)-Chrome是如何设法克服这个问题的?
URL示例(在章节中向下滚动一点以查看垂直视频):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22
4条答案
按热度按时间p4tfgftt1#
由于这个问题是与一些iOS特定的编码选项,许多非苹果播放器不能读取,最简单的解决方案,我能想到的是转码和旋转视频。
这已经在网络上的许多帖子中讨论过了,在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
j1dl9f462#
I am guessing that Chrome is respecting the
width="360"
andheight="640"
attributes of your<video>
tags, while Firefox is not. If I download one of your videos and play it back in Media Player Classic, again the orientation is incorrect. But just like in web browsers, there are inconsistencies: the same video opened in VLC player plays back with the correct orientation.I would recommend that, if you can, you re-encode the videos using a (free) program called AVIdemux. I just tried it on one of your videos, and it worked well with minimal effort. As a bonus it shrunk your video down considerably, with only minimal quality loss.
Here are the steps:
Then you will need to re-upload your video.
7d7tgy0s3#
可能不是真正可行的解决方案,但添加CSS规则(如
至少可以使视频在Firefox中以正确的方向播放。问题是:
我看到你的网站使用video.js。它可能值得看看https://github.com/xbgmsharp/videojs-rotatezoom?
9q78igpj4#
我读到这是一个问题,因为视频起源于iOS。
**使用移动的设备录制的所有视频都将包含 * 旋转元数据 *,包括来自iOS和Android设备的旋转元数据。**它可以采用4个值:0(向左倾斜)、90(纵向)、180和270:
在chrome上一切都很好,在firefox上风景视频的方向是错误的。
**Firefox和IE 10是唯一不支持旋转元数据的主流浏览器。**以下是Firefox与Chrome的比较:
目前最新的Firefox 42版本仍然不支持它,IE11和Edge 12、13支持它。
支持轮换信息的移动的/桌面播放器列表:https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/
我怎么还能克服这个问题。真的没有解决办法吗?
请参阅this answer了解解决方案,基本上您需要:
1.使用FFmpeg旋转视频(因此Firefox和其他不支持旋转元数据的浏览器可以正确显示视频)
1.删除旋转元数据(这样其他播放器就不会旋转视频,因为FFmepg已经旋转了该视频)
图片提供:https://blog.addpipe.com/mp4-rotation-metadata-in-mobile-video-files/