Web SDK播放器播放mp4视频有声音无图像
高****师 · 高****师 发布于2016-08-05 11:17 浏览:5484 回复:2

最近遇到一个问题,播放mp4视频有声音无图像;并且不同的浏览器播放现象还不同,大概的现象如下:

1、电脑上的Chrome、Firefox播放有声音无图像;

2、Mac上的Safari播放正常;

3、iOS的Safari播放正常(Android的还未测试);


原因:我录制的mp4视频文件不是h264编码的(可以通过ffmpeg、ffprobe或者mediainfo查看这个视频的编码格式);


注1:如果不是h264编码的视频,使用html5的video标签播放也是无法解码视频的,这种视频是不符合html5规范的(视频h264编码,音频aac);

注2:html5还要求,mp4文件的moov信息需要在视频头部,这样播放网络视频时,才能先加载moov元数据信息,不需要下载完整个mp4文件才播放;关于moov信息,推荐一个工具AtomicParsley(Mac下可以用home brew安装);


当然,如果你是使用的Safari浏览器,上面的两种情况应该都不是问题(可能Safari浏览器针对流媒体解码做了优化);


在歪果仁的网站找到一篇不错的文章:https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats


ffmpeg工具:

$ ffmpeg -i test.mp4 

ffmpeg version 3.0.2 Copyright (c) 2000-2016 the FFmpeg developers

  built with Apple LLVM version 7.3.0 (clang-703.0.29)

  configuration: --prefix=/usr/local/Cellar/ffmpeg/3.0.2 --enable-shared --enable-pthreads --enable-gpl --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags= --host-ldflags= --enable-opencl --enable-libx264 --enable-libmp3lame --enable-libxvid --enable-vda

  libavutil      55. 17.103 / 55. 17.103

  libavcodec     57. 24.102 / 57. 24.102

  libavformat    57. 25.100 / 57. 25.100

  libavdevice    57.  0.101 / 57.  0.101

  libavfilter     6. 31.100 /  6. 31.100

  libavresample   3.  0.  0 /  3.  0.  0

  libswscale      4.  0.100 /  4.  0.100

  libswresample   2.  0.101 /  2.  0.101

  libpostproc    54.  0.100 / 54.  0.100

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'test.mp4':

  Metadata:

    major_brand     : isom

    minor_version   : 512

    compatible_brands: isomiso2mp41

    encoder         : Lavf54.6.100

  Duration: 00:30:00.28, start: 0.000000, bitrate: 1910 kb/s

    Stream #0:0(und): Video: mpeg4 (Simple Profile) (mp4v / 0x7634706D), yuv420p, 720x576 [SAR 1:1 DAR 5:4], 1776 kb/s, 25 fps, 25 tbr, 25 tbn, 25 tbc (default)

    Metadata:

      handler_name    : VideoHandler

    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, stereo, fltp, 127 kb/s (default)

    Metadata:

      handler_name    : SoundHandler


mediainfo工具:

$ mediainfo test.mp4 

General

Complete name                            : test.mp4

Format                                   : MPEG-4

Format profile                           : Base Media

Codec ID                                 : isom (isom/iso2/mp41)

File size                                : 410 MiB

Duration                                 : 30mn 0s

Overall bit rate mode                    : Constant

Overall bit rate                         : 1 910 Kbps

Encoded date                             : UTC 1904-01-01 00:00:00

Tagged date                              : UTC 1904-01-01 00:00:00

Writing application                      : Lavf54.6.100


Video

ID                                       : 1

Format                                   : MPEG-4 Visual

Format profile                           : Simple@L3

Format settings, BVOP                    : No

Format settings, QPel                    : No

Format settings, GMC                     : No warppoints

Format settings, Matrix                  : Default (H.263)

Codec ID                                 : 20

Duration                                 : 30mn 0s

Bit rate mode                            : Constant

Bit rate                                 : 1 777 Kbps

Width                                    : 720 pixels

Height                                   : 576 pixels

Display aspect ratio                     : 5:4

Frame rate mode                          : Constant

Frame rate                               : 25.000 fps

Standard                                 : PAL

Color space                              : YUV

Chroma subsampling                       : 4:2:0

Bit depth                                : 8 bits

Scan type                                : Progressive

Compression mode                         : Lossy

Bits/(Pixel*Frame)                       : 0.171

Stream size                              : 381 MiB (93%)

Writing library                          : XviD 64

Encoded date                             : UTC 1904-01-01 00:00:00

Tagged date                              : UTC 1904-01-01 00:00:00


Audio

ID                                       : 2

Format                                   : AAC

Format/Info                              : Advanced Audio Codec

Format profile                           : LC

Codec ID                                 : 40

Duration                                 : 30mn 0s

Duration_FirstFrame                      : 23ms

Bit rate mode                            : Constant

Bit rate                                 : 128 Kbps

Channel(s)                               : 2 channels

Channel positions                        : Front: L R

Sampling rate                            : 44.1 KHz

Frame rate                               : 43.066 fps (1024 spf)

Compression mode                         : Lossy

Stream size                              : 27.5 MiB (7%)

Default                                  : Yes

Alternate group                          : 1

Encoded date                             : UTC 1904-01-01 00:00:00

Tagged date                              : UTC 1904-01-01 00:00:00


AtomParsley工具:

$ AtomicParsley test.mp4 -T 

Atom ftyp @ 0 of size: 28, ends @ 28

Atom free @ 28 of size: 8, ends @ 36

Atom mdat @ 36 of size: 428669065, ends @ 428669101

Atom moov @ 428669101 of size: 1154764, ends @ 429823865

     Atom mvhd @ 428669109 of size: 108, ends @ 428669217

     Atom trak @ 428669217 of size: 364339, ends @ 429033556

         Atom tkhd @ 428669225 of size: 92, ends @ 428669317

         Atom edts @ 428669317 of size: 36, ends @ 428669353

             Atom elst @ 428669325 of size: 28, ends @ 428669353

         Atom mdia @ 428669353 of size: 364203, ends @ 429033556

             Atom mdhd @ 428669361 of size: 32, ends @ 428669393


结论:使用ffmpeg等工具转码成符合html5标准的h264编码格式(使用MCT转码得到的也是标准的视频编码);

音视频编码比较复杂,我们只能尽量让自己的视频流符合标准,才能做到最好的兼容性。


点赞  ( 0 )
收藏
评论(2)
共2条回复 最后由信****歌回复于2016-08-14 16:53
#2d****7回复于2016-08-07 17:41:01

您好!我的网站应该如何做更好dao67.com呢?

0
#3信****歌回复于2016-08-14 16:53:07
#2 d****7回复
您好!我的网站应该如何做更好dao67.com呢?

你在这城提交外链无用,搜索引擎有可能识别为嗓音。

0
TOP