前端播放 MP4 视频，请教问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 162 天前的主题，其中的信息可能已经有所发展或是发生改变。

[滤镜使用列表] (1) Built-in MPEG Source (2) Built-in Video Codec/Transform (3) Enhanced Video Renderer(Custom Present) (4) Built-in Audio Codec/Transform (5) DirectSound Audio Renderer

[视频信息] 视频编码：H264 - 内置 FFmpeg 解码器(h264, Thread Frame) 输入格式：H264(24 bits) 输入尺寸：1920 × 1080(1.78:1) 输出格式：NV12(12 bits) 输出尺寸：1920 × 1080(1.78:1) 帧率：25 BitRate: 未知

[音频信息] 音频编码：A-law PCM(0x6) - 内置 FFmpeg 解码器(pcm_alaw) 采样率：8000 -> 8000 Hz 位率：8 -> 16 位声道数：1 -> 2 声道 Bitrate: 64 kbps ———————— 该视频直接放进浏览器不能播放，为什么，或者需要什么组件可以播放？文件拓展名是 mp4 。

第 1 条附言 · 161 天前

还是在后端处理了，重新封装 mp4 就可以了。前端搞不定，引入好多都各种报错。

28 条回复 • 2024-06-13 15:23:03 +08:00

yamabu

162 天前

音频是 G711 的问题？

Dnlyao

162 天前

@yamabu 我也不清楚，就是加载不出来。浏览器没有报错。用普通的播放器也是加载不出来各种报错。然后七牛云重新做成 mp4 文件就可以直接播放。但是需要转做本地系统，要直接系统页面能看到。

yamabu

162 天前

试试看用 ffmpge 把视频和音频单独拆出来，再重新合并成 MP4 ，排除一下封装的问题。
还是播不了的话，合并 MP4 的时候把音轨去掉试试。

Rache1

162 天前

打开 chrome://media-internals/，然后找到你那个 player ，看 ffmpeg 的输出信息里面，会有什么原因的。

yamabu

162 天前

我想起来一件事，ffmpeg 可能不支持把 G711 打进 MP4 ，不知道现在的版本如何。你这个应该是监控设备的视频？我的建议是把 G711 转 AAC 之类的通用一些的编码。

digimoon

162 天前

H264(24 bits) ?

Dnlyao

162 天前

更多信息
General
Complete name : 301717747163064.MP4
Format : MPEG-PS
File size : 6.08 MiB
Duration : 21 s 482 ms
Overall bit rate : 2 372 kb/s
FileExtension_Invalid : mpeg mpg m2p vob vro pss evo

Video
ID : 224 (0xE0)
Format : AVC
Format/Info : Advanced Video Codec
Format profile : [email protected]
Format settings : CABAC / 1 Ref Frames
Format settings, CABAC : Yes
Format settings, Reference fra : 1 frame
Duration : 21 s 482 ms
Width : 1 920 pixels
Height : 1 080 pixels
Display aspect ratio : 16:9
Frame rate mode : Variable
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Color range : Full
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709

Audio #1
ID : 192 (0xC0)
Format : MPEG Audio
Duration : 21 s 400 ms
Compression mode : Lossy
Delay relative to video : 16 ms

Audio #2
ID : 193 (0xC1)
Format : MPEG Audio
Compression mode : Lossy

Audio #3
ID : 194 (0xC2)
Format : MPEG Audio
Compression mode : Lossy

Audio #4
ID : 195 (0xC3)
Format : MPEG Audio
Compression mode : Lossy

Audio #5
ID : 196 (0xC4)
Format : MPEG Audio
Compression mode : Lossy

Audio #6
ID : 197 (0xC5)
Format : MPEG Audio
Compression mode : Lossy

Audio #7
ID : 198 (0xC6)
Format : MPEG Audio
Compression mode : Lossy

Audio #8
ID : 199 (0xC7)
Format : MPEG Audio
Compression mode : Lossy

Audio #9
ID : 200 (0xC8)
Format : MPEG Audio
Compression mode : Lossy

Audio #10
ID : 201 (0xC9)
Format : MPEG Audio
Compression mode : Lossy

Audio #11
ID : 202 (0xCA)
Format : MPEG Audio
Compression mode : Lossy

Audio #12
ID : 203 (0xCB)
Format : MPEG Audio
Compression mode : Lossy

Audio #13
ID : 204 (0xCC)
Format : MPEG Audio
Compression mode : Lossy

Audio #14
ID : 205 (0xCD)
Format : MPEG Audio
Compression mode : Lossy

Audio #15
ID : 206 (0xCE)
Format : MPEG Audio
Compression mode : Lossy

Audio #16
ID : 207 (0xCF)
Format : MPEG Audio
Compression mode : Lossy

Audio #17
ID : 208 (0xD0)
Format : MPEG Audio
Compression mode : Lossy

Audio #18
ID : 209 (0xD1)
Format : MPEG Audio
Compression mode : Lossy

Audio #19
ID : 210 (0xD2)
Format : MPEG Audio
Compression mode : Lossy

Audio #20
ID : 211 (0xD3)
Format : MPEG Audio
Compression mode : Lossy

Audio #21
ID : 212 (0xD4)
Format : MPEG Audio
Compression mode : Lossy

Audio #22
ID : 213 (0xD5)
Format : MPEG Audio
Compression mode : Lossy

Audio #23
ID : 214 (0xD6)
Format : MPEG Audio
Compression mode : Lossy

Audio #24
ID : 215 (0xD7)
Format : MPEG Audio
Compression mode : Lossy

Audio #25
ID : 216 (0xD8)
Format : MPEG Audio
Compression mode : Lossy

Audio #26
ID : 217 (0xD9)
Format : MPEG Audio
Compression mode : Lossy

Audio #27
ID : 218 (0xDA)
Format : MPEG Audio
Compression mode : Lossy

Audio #28
ID : 219 (0xDB)
Format : MPEG Audio
Compression mode : Lossy

Audio #29
ID : 220 (0xDC)
Format : MPEG Audio
Compression mode : Lossy

Audio #30
ID : 221 (0xDD)
Format : MPEG Audio
Compression mode : Lossy

Audio #31
ID : 222 (0xDE)
Format : MPEG Audio
Compression mode : Lossy

Audio #32
ID : 223 (0xDF)
Format : MPEG Audio
Compression mode : Lossy

Text
ID : 189 (0xBD)
Format : RLE
Format/Info : Run-length encoding
Duration : 20 s 2 ms

Menu
Format : DVD-Video

Dnlyao

162 天前

@yamabu 监控视频截取的，app 传上来的。后端没处理。

Dnlyao

162 天前

@Rache1
报错了
"FFmpegDemuxer: open context failed"
{"code":12,"data":{},"group":"PipelineStatus","message":"","stack":[{"file":"media\\filters\\ffmpeg_demuxer.cc","line":1268}]}

ntedshen

162 天前

https://www.chromium.org/audio-video/
道理上讲 pcm 没什么问题，有问题也应该是有视频没声音。。。

但是这个解码信息属实是写了等于没写，整个
ffprobe -v quiet -hide_banner -print_format json -show_format -show_streams -i
先。。。

yamabu

162 天前

感觉多半是音轨的问题了，G711 封装进 MP4 本来就是不标准的

Rache1

162 天前

@Dnlyao #9 🤡 这反应的信息好像也没什么用

Dnlyao

162 天前

@Rache1 /(ㄒoㄒ)/~~ 这样，我也不懂阿，第一次接触视频的，试过好多方法，找不到解决方法的方向。

Dnlyao

162 天前

@yamabu 我试一下，音频保存其他编码的，看是不是就正确了。视频的格式没错吧？ h264 的

Dnlyao

162 天前

@ntedshen 我还没下载 ffmpeg,晚点安装环境看看。

yamabu

162 天前

@Dnlyao 目前给出的信息看不出更多了，获取用 MP4 分析工具把 box 拆开看看了只能

yamabu

162 天前

还有一种可能，监控设备封装 MP4 文件的时候应该用的 MP4V2 这个库，G711 每 frame 需要确保是 160 字节，否则也有问题

Dnlyao

162 天前

@yamabu 好的谢谢你

aikilan

161 天前

不如视频发出来

expy

161 天前

Format : MPEG-PS
FileExtension_Invalid : mpeg mpg m2p vob vro pss evo
这文件好像不是 mp4 容器？

https://www.chromium.org/audio-video/

cctrv

161 天前 via iPhone

Format : MPEG-PS
FileExtension_Invalid : mpeg mpg m2p vob vro pss evo

它應該的擴展名是 .mpg
所以它本來就不是 mp4 文件⋯

yuzo555

161 天前

这是一个 mpg 封装格式的视频，浏览器不支持，但里面的编码浏览器应该都支持，可以本地 ffmpeg 直接转封装为 mp4 就行了

Dnlyao

161 天前

前端有库可以转换播放？还是说只能 node 后端+ffmpeg 重新封装视频？

expy

161 天前

可以用 js 写个 demuxer 解流再混流成🎫🎫 mp4 让浏览器播放，这个能播放 MPEG2-TS 和 FLV ，PS 不知道有没有人写过。https://github.com/xqq/mpegts.js

或者用 wasm 跑 ffmpeg 来播放，这个项目好像就是。https://github.com/numberwolf/h265web.js

最好还是视频生成的时候就选兼容的容器和编码，别用那些古老的格式。

Dnlyao

161 天前

@expy 感谢，但这两个引用都有问题。h265web.js 跑，就显示不支持 mpeg,但是文档又写可以。不太清楚。

luny

161 天前

可以去掉音频，重新封装视频试下，看看是不是音频导致的
ffmpeg -i test.mp4 -vcodec copy -an test-out.mp4

Dnlyao

161 天前

@luny 他是监控截取上传的，已经换了，h264,音频 acc ，本身视频还是不行，显示还是 mpeg ，重新封装视频应该就可以，现在想看一下能不能在前端解决。如果不行最后的方法，就是本地保存视频的时候，重新封装一次。

luny

161 天前

@Dnlyao 这个应该是国标 GB28181 的视频流，比较理想的办法，就是参考 https://github.com/xqq/mpegts.js 写一个 ps 的 demuxer ，ps 的代码可以参考 https://github.com/ireader/media-server/blob/master/libmpeg/source/mpeg-ps-dec.c