如何使用<video>处理具有轮播属性的视频？

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 */
}

它可以工作，但控制器也旋转了。 IE：

歌剧现在只识别-webkit，但会影响Chrome。

我的问题是：如果视频有旋转属性，如何识别视频？

并且：如何使用旋转和控制器正确显示视频？

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>

}  

你测试fotr浏览器类型，然后旋转它。

新版Chrome（52.0.2743）最近也出现了问题。它压缩了视频，因此改变了宽高比，仍然在寻找解决方案。这只发生在手机上录制的视频