V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dnlyao
V2EX  ›  Vue.js

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

  •  
  •   Dnlyao · 40 天前 · 1974 次点击
    这是一个创建于 40 天前的主题,其中的信息可能已经有所发展或是发生改变。

    [滤镜使用列表] (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 条附言  ·  39 天前
    还是在后端处理了,重新封装 mp4 就可以了。前端搞不定,引入好多都各种报错。
    28 条回复    2024-06-13 15:23:03 +08:00
    yamabu
        1
    yamabu  
       40 天前
    音频是 G711 的问题?
    Dnlyao
        2
    Dnlyao  
    OP
       40 天前
    @yamabu 我也不清楚,就是加载不出来。浏览器没有报错。用普通的播放器也是加载不出来各种报错。然后七牛云重新做成 mp4 文件就可以直接播放。但是需要转做本地系统,要直接系统页面能看到。
    yamabu
        3
    yamabu  
       40 天前
    试试看用 ffmpge 把视频和音频单独拆出来,再重新合并成 MP4 ,排除一下封装的问题。
    还是播不了的话,合并 MP4 的时候把音轨去掉试试。
    Rache1
        4
    Rache1  
       40 天前   ❤️ 1
    打开 chrome://media-internals/,然后找到你那个 player ,看 ffmpeg 的输出信息里面,会有什么原因的。
    yamabu
        5
    yamabu  
       40 天前
    我想起来一件事,ffmpeg 可能不支持把 G711 打进 MP4 ,不知道现在的版本如何。你这个应该是监控设备的视频?我的建议是把 G711 转 AAC 之类的通用一些的编码。
    digimoon
        6
    digimoon  
       40 天前
    H264(24 bits) ?
    Dnlyao
        7
    Dnlyao  
    OP
       40 天前
    更多信息
    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
        8
    Dnlyao  
    OP
       40 天前
    @yamabu 监控视频截取的,app 传上来的。后端没处理。
    Dnlyao
        9
    Dnlyao  
    OP
       40 天前
    @Rache1
    报错了
    "FFmpegDemuxer: open context failed"
    {"code":12,"data":{},"group":"PipelineStatus","message":"","stack":[{"file":"media\\filters\\ffmpeg_demuxer.cc","line":1268}]}
    ntedshen
        10
    ntedshen  
       40 天前
    https://www.chromium.org/audio-video/
    道理上讲 pcm 没什么问题,有问题也应该是有视频没声音。。。

    但是这个解码信息属实是写了等于没写,整个
    ffprobe -v quiet -hide_banner -print_format json -show_format -show_streams -i
    先。。。
    yamabu
        11
    yamabu  
       40 天前
    感觉多半是音轨的问题了,G711 封装进 MP4 本来就是不标准的
    Rache1
        12
    Rache1  
       40 天前
    @Dnlyao #9 🤡 这反应的信息好像也没什么用
    Dnlyao
        13
    Dnlyao  
    OP
       40 天前
    @Rache1 /(ㄒoㄒ)/~~ 这样,我也不懂阿,第一次接触视频的,试过好多方法,找不到解决方法的方向。
    Dnlyao
        14
    Dnlyao  
    OP
       40 天前
    @yamabu 我试一下,音频保存其他编码的,看是不是就正确了。视频的格式没错吧? h264 的
    Dnlyao
        15
    Dnlyao  
    OP
       40 天前
    @ntedshen 我还没下载 ffmpeg,晚点安装环境看看。
    yamabu
        16
    yamabu  
       40 天前
    @Dnlyao 目前给出的信息看不出更多了,获取用 MP4 分析工具把 box 拆开看看了只能
    yamabu
        17
    yamabu  
       40 天前
    还有一种可能,监控设备封装 MP4 文件的时候应该用的 MP4V2 这个库,G711 每 frame 需要确保是 160 字节,否则也有问题
    Dnlyao
        18
    Dnlyao  
    OP
       40 天前
    @yamabu 好的 谢谢你
    aikilan
        19
    aikilan  
       39 天前
    不如视频发出来
    expy
        20
    expy  
       39 天前
    Format : MPEG-PS
    FileExtension_Invalid : mpeg mpg m2p vob vro pss evo
    这文件好像不是 mp4 容器?

    https://www.chromium.org/audio-video/
    cctrv
        21
    cctrv  
       39 天前 via iPhone
    Format : MPEG-PS
    FileExtension_Invalid : mpeg mpg m2p vob vro pss evo

    它應該的擴展名是 .mpg
    所以它本來就不是 mp4 文件⋯
    yuzo555
        22
    yuzo555  
       39 天前
    这是一个 mpg 封装格式的视频,浏览器不支持,但里面的编码浏览器应该都支持,可以本地 ffmpeg 直接转封装为 mp4 就行了
    Dnlyao
        23
    Dnlyao  
    OP
       39 天前
    前端有库可以转换播放?还是说只能 node 后端+ffmpeg 重新封装视频?
    expy
        24
    expy  
       39 天前   ❤️ 1
    可以用 js 写个 demuxer 解流再混流成🎫🎫 mp4 让浏览器播放,这个能播放 MPEG2-TS 和 FLV ,PS 不知道有没有人写过。https://github.com/xqq/mpegts.js

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

    最好还是视频生成的时候就选兼容的容器和编码,别用那些古老的格式。
    Dnlyao
        25
    Dnlyao  
    OP
       39 天前
    @expy 感谢,但这两个引用都有问题。h265web.js 跑,就显示不支持 mpeg,但是文档又写可以。不太清楚。
    luny
        26
    luny  
       39 天前
    可以去掉音频,重新封装视频试下,看看是不是音频导致的
    ffmpeg -i test.mp4 -vcodec copy -an test-out.mp4
    Dnlyao
        27
    Dnlyao  
    OP
       39 天前
    @luny 他是监控截取上传的,已经换了,h264,音频 acc ,本身视频还是不行,显示还是 mpeg ,重新封装视频应该就可以,现在想看一下能不能在前端解决。如果不行最后的方法,就是本地保存视频的时候,重新封装一次。
    luny
        28
    luny  
       39 天前   ❤️ 1
    @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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3312 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:43 · PVG 18:43 · LAX 03:43 · JFK 06:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.