mediaelement.js/html5视频在前进过多或后退过多时永远保持加载状态

mediaelement.js / html5 video keeps on loading forever when advancing too much or going back too much

本文关键字:永远 时永 状态 加载 视频 html5 mediaelement js      更新时间:2024-01-13

我自己的MP4/M4V文件中的mediaelement.js有问题。当我点击搜索栏光标并向前拖动时,电影进展顺利。但如果我向前或向后点击太远,玩家就会进入紧张状态,并永远保持加载。

这个问题出现在Chrome(永远紧张)和IE(需要很长时间加载,但最终又开始播放电影)中。在IE中,它似乎不是逐渐下载的,而在Chrome中,它看起来是这样的,因为当我小心地拖动搜索栏时,它会立即播放)。

我的页面的HTML代码是:

<link rel="stylesheet" type="text/css" href="/Scripts/MediaElement/mediaelementplayer.css" />
<script type="text/javascript" src="/Scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/Scripts/MediaElement/mediaelement-and-player.min.js"></script>
...
<video id="v1" src="/media/movies/20131201025101_E93D47344CA84A67BE4637ED9B5434D6/10.m4v" controls="controls" width="912" height="404"/>
<script>
  var player = new MediaElementPlayer('#v1', {startVolume: 0.8
  });
  player.play();
</script>

然后我下载了jPlayer的示例视频http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v.我在我的服务器上用MediaElement尝试了一下,然后。。。它工作得很好!

因此,我得出的结论是,这个问题在我的档案中。

MediaInfo报告以下内容:

General
Complete name                            : 12.m4v
Format                                   : MPEG-4
Format profile                           : Base Media / Version 2
Codec ID                                 : mp42
File size                                : 88.9 MiB
Duration                                 : 10mn 35s
Overall bit rate mode                    : Variable
Overall bit rate                         : 1 173 Kbps
Encoded date                             : UTC 2013-12-01 17:14:40
Tagged date                              : UTC 2013-12-01 17:16:07
Writing application                      : HandBrake 0.9.9 2013052900
Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : Baseline@L3.0
Format settings, CABAC                   : No
Format settings, ReFrames                : 3 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 10mn 35s
Bit rate mode                            : Variable
Bit rate                                 : 1 000 Kbps
Width                                    : 512 pixels
Height                                   : 384 pixels
Display aspect ratio                     : 4:3
Frame rate mode                          : Constant
Frame rate                               : 25.000 fps
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.203
Stream size                              : 76.6 MiB (86%)
Writing library                          : x264 core 130 r2273 b3065e6
Encoding settings                        : cabac=0 / ref=3 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=6 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=0 / weightp=0 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=abr / mbtree=1 / bitrate=1000 / ratetol=1.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=10000 / vbv_bufsize=10000 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Encoded date                             : UTC 2013-12-01 17:14:40
Tagged date                              : UTC 2013-12-01 17:16:07
Color primaries                          : BT.601 NTSC
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.601
Audio
ID                                       : 2
Format                                   : AAC
Format/Info                              : Advanced Audio Codec
Format profile                           : LC
Codec ID                                 : 40
Duration                                 : 10mn 35s
Bit rate mode                            : Variable
Bit rate                                 : 160 Kbps
Maximum bit rate                         : 192 Kbps
Channel count                            : 2 channels
Channel positions                        : Front: L R
Sampling rate                            : 44.1 KHz
Compression mode                         : Lossy
Stream size                              : 12.1 MiB (14%)
Encoded date                             : UTC 2013-12-01 17:14:40
Tagged date                              : UTC 2013-12-01 17:16:06

我觉得这很像MediaInfo关于jPlayer示例视频(重命名为11.m4v)的报告:

General
Complete name                            : 11.m4v
Format                                   : MPEG-4
Format profile                           : Base Media / Version 2
Codec ID                                 : mp42
File size                                : 3.87 MiB
Duration                                 : 33s 65ms
Overall bit rate mode                    : Variable
Overall bit rate                         : 983 Kbps
Encoded date                             : UTC 2011-08-30 14:11:40
Tagged date                              : UTC 2011-08-30 14:11:44
Writing application                      : HandBrake 0.9.5 2011010300
Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : Baseline@L3.0
Format settings, CABAC                   : No
Format settings, ReFrames                : 2 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 32s 520ms
Bit rate mode                            : Variable
Bit rate                                 : 867 Kbps
Width                                    : 640 pixels
Height                                   : 360 pixels
Display aspect ratio                     : 16:9
Frame rate mode                          : Constant
Frame rate                               : 25.000 fps
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.150
Stream size                              : 3.36 MiB (87%)
Writing library                          : x264 core 112
Encoding settings                        : cabac=0 / ref=2 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=6 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=12 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / constrained_intra=0 / bframes=0 / weightp=0 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=20.0 / qcomp=0.60 / qpmin=3 / qpmax=51 / qpstep=4 / ip_ratio=1.40 / aq=1:1.00
Encoded date                             : UTC 2011-08-30 14:11:40
Tagged date                              : UTC 2011-08-30 14:11:44
Color primaries                          : BT.601 NTSC
Transfer characteristics                 : BT.709
Matrix coefficients                      : BT.601
Audio
ID                                       : 2
Format                                   : AAC
Format/Info                              : Advanced Audio Codec
Format profile                           : LC
Codec ID                                 : 40
Duration                                 : 33s 65ms
Bit rate mode                            : Variable
Bit rate                                 : 128 Kbps
Maximum bit rate                         : 149 Kbps
Channel count                            : 2 channels
Channel positions                        : Front: L R
Sampling rate                            : 44.1 KHz
Compression mode                         : Lossy
Stream size                              : 515 KiB (13%)
Encoded date                             : UTC 2011-08-30 14:11:40
Tagged date                              : UTC 2011-08-30 14:11:44

此外,我已经将moov原子移到了文件的开头。这是AtomicParsley对我的文件的报告:

Atom ftyp @ 0 of size: 28, ends @ 28
Atom moov @ 28 of size: 222456, ends @ 222484
     Atom mvhd @ 36 of size: 108, ends @ 144
     Atom iods @ 144 of size: 24, ends @ 168
     Atom trak @ 168 of size: 96599, ends @ 96767
         Atom tkhd @ 176 of size: 92, ends @ 268
         Atom mdia @ 268 of size: 96499, ends @ 96767
             Atom mdhd @ 276 of size: 32, ends @ 308
             Atom hdlr @ 308 of size: 33, ends @ 341
             Atom minf @ 341 of size: 96426, ends @ 96767
                 Atom vmhd @ 349 of size: 20, ends @ 369
                 Atom dinf @ 369 of size: 36, ends @ 405
                     Atom dref @ 377 of size: 28, ends @ 405
                 Atom stbl @ 405 of size: 96362, ends @ 96767
                     Atom stsd @ 413 of size: 170, ends @ 583
                         Atom avc1 @ 429 of size: 154, ends @ 583
                             Atom avcC @ 515 of size: 50, ends @ 565
                             Atom colr @ 565 of size: 18, ends @ 583                     ~
                     Atom stts @ 583 of size: 24, ends @ 607
                     Atom stsz @ 607 of size: 63588, ends @ 64195
                     Atom stsc @ 64195 of size: 28, ends @ 64223
                     Atom stco @ 64223 of size: 15908, ends @ 80131
                     Atom stss @ 80131 of size: 732, ends @ 80863
                     Atom sdtp @ 80863 of size: 15904, ends @ 96767
     Atom trak @ 96767 of size: 125606, ends @ 222373
         Atom tkhd @ 96775 of size: 92, ends @ 96867
         Atom mdia @ 96867 of size: 125484, ends @ 222351
             Atom mdhd @ 96875 of size: 32, ends @ 96907
             Atom hdlr @ 96907 of size: 33, ends @ 96940
             Atom minf @ 96940 of size: 125411, ends @ 222351
                 Atom smhd @ 96948 of size: 16, ends @ 96964
                 Atom dinf @ 96964 of size: 36, ends @ 97000
                     Atom dref @ 96972 of size: 28, ends @ 97000
                 Atom stbl @ 97000 of size: 125351, ends @ 222351
                     Atom stsd @ 97008 of size: 103, ends @ 97111
                         Atom mp4a @ 97024 of size: 87, ends @ 97111
                             Atom esds @ 97060 of size: 51, ends @ 97111
                     Atom stts @ 97111 of size: 24, ends @ 97135
                     Atom stsz @ 97135 of size: 109528, ends @ 206663
                     Atom stsc @ 206663 of size: 28, ends @ 206691
                     Atom stco @ 206691 of size: 15660, ends @ 222351
         Atom udta @ 222351 of size: 22, ends @ 222373
             Atom name @ 222359 of size: 14, ends @ 222373
     Atom udta @ 222373 of size: 111, ends @ 222484
         Atom meta @ 222381 of size: 103, ends @ 222484
             Atom hdlr @ 222393 of size: 33, ends @ 222426
             Atom ilst @ 222426 of size: 58, ends @ 222484
                 Atom ©too @ 222434 of size: 50, ends @ 222484
                     Atom data @ 222442 of size: 42, ends @ 222484
Atom mdat @ 222484 of size: 92990967, ends @ 93213451
 ~ denotes an unknown atom
------------------------------------------------------
Total size: 93213451 bytes; 49 atoms total. AtomicParsley version: 0.9.0 (utf16)
Media data: 92990967 bytes; 222484 bytes all other atoms (0.239% atom overhead).
Total free atom space: 0 bytes; 0.000% waste.
------------------------------------------------------

同样,它看起来与jPlayer的示例文件非常相似:

Atom ftyp @ 0 of size: 28, ends @ 28
Atom moov @ 28 of size: 12713, ends @ 12741
     Atom mvhd @ 36 of size: 108, ends @ 144
     Atom iods @ 144 of size: 24, ends @ 168
     Atom trak @ 168 of size: 5484, ends @ 5652
         Atom tkhd @ 176 of size: 92, ends @ 268
         Atom mdia @ 268 of size: 5384, ends @ 5652
             Atom mdhd @ 276 of size: 32, ends @ 308
             Atom hdlr @ 308 of size: 33, ends @ 341
             Atom minf @ 341 of size: 5311, ends @ 5652
                 Atom vmhd @ 349 of size: 20, ends @ 369
                 Atom dinf @ 369 of size: 36, ends @ 405
                     Atom dref @ 377 of size: 28, ends @ 405
                 Atom stbl @ 405 of size: 5247, ends @ 5652
                     Atom stsd @ 413 of size: 170, ends @ 583
                         Atom avc1 @ 429 of size: 154, ends @ 583
                             Atom avcC @ 515 of size: 50, ends @ 565
                             Atom colr @ 565 of size: 18, ends @ 583                     ~
                     Atom stts @ 583 of size: 24, ends @ 607
                     Atom stsz @ 607 of size: 3272, ends @ 3879
                     Atom stsc @ 3879 of size: 40, ends @ 3919
                     Atom stco @ 3919 of size: 832, ends @ 4751
                     Atom stss @ 4751 of size: 76, ends @ 4827
                     Atom sdtp @ 4827 of size: 825, ends @ 5652
     Atom trak @ 5652 of size: 6978, ends @ 12630
         Atom tkhd @ 5660 of size: 92, ends @ 5752
         Atom mdia @ 5752 of size: 6856, ends @ 12608
             Atom mdhd @ 5760 of size: 32, ends @ 5792
             Atom hdlr @ 5792 of size: 33, ends @ 5825
             Atom minf @ 5825 of size: 6783, ends @ 12608
                 Atom smhd @ 5833 of size: 16, ends @ 5849
                 Atom dinf @ 5849 of size: 36, ends @ 5885
                     Atom dref @ 5857 of size: 28, ends @ 5885
                 Atom stbl @ 5885 of size: 6723, ends @ 12608
                     Atom stsd @ 5893 of size: 103, ends @ 5996
                         Atom mp4a @ 5909 of size: 87, ends @ 5996
                             Atom esds @ 5945 of size: 51, ends @ 5996
                     Atom stts @ 5996 of size: 24, ends @ 6020
                     Atom stsz @ 6020 of size: 5716, ends @ 11736
                     Atom stsc @ 11736 of size: 40, ends @ 11776
                     Atom stco @ 11776 of size: 832, ends @ 12608
         Atom udta @ 12608 of size: 22, ends @ 12630
             Atom name @ 12616 of size: 14, ends @ 12630
     Atom udta @ 12630 of size: 111, ends @ 12741
         Atom meta @ 12638 of size: 103, ends @ 12741
             Atom hdlr @ 12650 of size: 33, ends @ 12683
             Atom ilst @ 12683 of size: 58, ends @ 12741
                 Atom ©too @ 12691 of size: 50, ends @ 12741
                     Atom data @ 12699 of size: 42, ends @ 12741
Atom mdat @ 12741 of size: 4050118, ends @ 4062859
 ~ denotes an unknown atom
------------------------------------------------------
Total size: 4062859 bytes; 49 atoms total. AtomicParsley version: 0.9.0 (utf16)
Media data: 4050118 bytes; 12741 bytes all other atoms (0.314% atom overhead).
Total free atom space: 0 bytes; 0.000% waste.
------------------------------------------------------

尽管有相似之处,但上面提到的两个文件的编码肯定有根本的不同,因为在其中一个文件上搜索总是有效的,而在另一个文件中搜索总是失败的。

也就是说,我的视频文件可能出了什么问题?我如何纠正它(最好使用Handbrake(请注意,MediaInfo报告Handbrake用于编码有效的文件)?

注意:我检查了服务器的MIME类型,并关闭了HTTPGZIP压缩。

提前谢谢。

Dan

这是一个延迟的回答,但可能是因为服务器不接受accept range标头信息(服务器只能请求文件的一部分)。参见:

http://www.cyberciti.biz/cloud-computing/http-status-code-206-commad-line-test/