Chrome FireFox上的视频方向不正确

txu3uszq  于 2022-12-06  发布在  Go
关注(0)|答案(4)|浏览(282)

我有视频的html5视频标签。在chrome上一切都很好,在firefox上风景视频的方向是错误的。。
即使尝试使用video.js,也没有变化。
我读到这是一个问题,因为视频起源于iOS。
所以有两个问题:1.我怎么还能克服这个问题。真的没有解决方案吗?2.(出于好奇)-Chrome是如何设法克服这个问题的?
URL示例(在章节中向下滚动一点以查看垂直视频):
http://www.letsfeedme.com/moments/55802f142f2dad3c008b4575-Balsamic-Vinegar-%22Caviar%22

p4tfgftt

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

j1dl9f46

j1dl9f462#

I am guessing that Chrome is respecting the width="360" and height="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:

  1. Download AVIdemux from http://www.fosshub.com/Avidemux.html
  2. Install and run AVIdemux
  3. Go to File menu and choose Open. Pick the video to re-encode.
  4. Go to Video menu and choose Filters
  5. Choose Transform > Rotate (double-click) > Rotate by 270 degrees (OK)
  6. Click the Preview button to check the output
  7. Click the Close button
  8. In the main window, under Video Output, choose MPEG4-AVC (x264)
  9. Under Output Format, choose MP4 Muxer
  10. Click the Save Video icon, and in the resulting window type a filename and click the Save button.
    Then you will need to re-upload your video.
7d7tgy0s

7d7tgy0s3#

可能不是真正可行的解决方案,但添加CSS规则(如

video {
 -moz-transform: rotate(90deg);
}

至少可以使视频在Firefox中以正确的方向播放。问题是:

  • 在没有规则的情况下以正确方向回放的视频将在有规则的情况下以错误方向回放
  • 视频控件也会旋转
  • 海报将以错误的方向显示

我看到你的网站使用video.js。它可能值得看看https://github.com/xbgmsharp/videojs-rotatezoom

9q78igpj

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/

相关问题