javascript - 如何使用处理带有旋转属性的视频？

Question

我有一些视频文件。媒体信息:

General
Complete name                            : E:\ownCloud\draft\20160720\2016-07-21_01-01-29_41347700.mp4
Format                                   : MPEG-4
Format profile                           : Base Media / Version 2
Codec ID                                 : mp42 (mp41/mp42/isom)
File size                                : 325 KiB
Duration                                 : 6 s 0 ms
Overall bit rate                         : 443 kb/s
Encoded date                             : UTC 2016-07-20 10:44:46
Tagged date                              : UTC 2016-07-20 10:44:46

Video
ID                                       : 2
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L1.3
Format settings, CABAC                   : Yes
Format settings, ReFrames                : 2 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 6 s 0 ms
Bit rate                                 : 386 kb/s
Width                                    : 240 pixels
Height                                   : 320 pixels
Display aspect ratio                     : 0.750
Rotation                                 : 90°
Frame rate mode                          : Variable
Frame rate                               : 30.000 FPS
Minimum frame rate                       : 28.571 FPS
Maximum frame rate                       : 35.294 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.168
Stream size                              : 283 KiB (87%)
Title                                    : Core Media Video
Encoded date                             : UTC 2016-07-20 10:44:46
Tagged date                              : UTC 2016-07-20 10:44:46
Color range                              : Limited
Color primaries                          : BT.709
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.601

Audio
ID                                       : 1
Format                                   : AAC
Format/Info                              : Advanced Audio Codec
Format profile                           : LC
Codec ID                                 : 40
Duration                                 : 6 s 0 ms
Source duration                          : 6 s 107 ms
Bit rate mode                            : Constant
Bit rate                                 : 50.8 kb/s
Nominal bit rate                         : 64.0 kb/s
Channel(s)                               : 2 channels
Channel(s)_Original                      : 1 channel
Channel positions                        : Front: C
Sampling rate                            : 44.1 kHz
Frame rate                               : 43.066 FPS (1024 spf)
Compression mode                         : Lossy
Stream size                              : 37.2 KiB (11%)
Source stream size                       : 37.9 KiB (12%)
Title                                    : Core Media Audio
Encoded date                             : UTC 2016-07-20 10:44:46
Tagged date                              : UTC 2016-07-20 10:44:46

您可以看到视频是通过旋转相机录制的。

我尝试这样使用:

<video src="2016-07-21_01-01-21_45791600.mp4" controls>

Chrome 会自动旋转视频，但 Firefox、IE 不会。

我尝试使用 css 在 IE 和 Firefox 上旋转:

video
{
    -ms-transform: rotate(90deg); /* Internet Explorer 9 */
    -moz-transform: rotate(90deg); /* Firefox */
}

它可以工作，但 Controller 也会旋转。IE:

opera 现在只能识别 -webkit，但它会影响 Chrome。

我的问题是:如何识别具有旋转属性的视频？

还有:如何通过旋转和 Controller 正确显示视频？

Answer 1

这不是一个新问题，问题通常出在 Firefox 而不是 chrome，有几个人提示过，但都无济于事。他们最终表示将在下一次浏览器更新时修复该问题。但主要时间。您可以使用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(52.0.2743)也出现了问题。它压缩了视频，从而改变了宽高比，仍在寻找解决方案。这只发生在移动设备上录制的视频