网络运维

一波三折之无源码解决网站上传不了视频的问题2

时间:2020-09-12 来源:juhe99 点击量:

一波三折之无源码解决网站上传不了视频的问题(二)

上回提到有点手尾没解决,这次把它说完。

一、现象

文件上传解决完交付后又收到反馈,上传的视频播放不了,之前有部分视频也没法播放。具体表现为上传的视频在浏览器里播放时黑屏,只有播放进度条,没有画面和声音。

二、排查

上传成功,那应该跟后端没什么关系了,因为播放主要由客户端负责。而且部分视频能播放,那说明项目网站功能应该问题不大。为了印证猜想,换了个手机浏览器打开(此前PC端用的是chrome),发现播放正常。说明应该是浏览器兼容性问题。但chrome浏览器不应该连个mp4格式的视频都播放不了吧,难道是视频编码的问题?

带着这个猜想,百度了一下,发现chrome还真的只支持h264格式的编码,但我怎么确认上传的视频是否为h264编码呢?

三、准备工具

查看视频编码格式的方法有很多工具,这里用到了ffmpeg,下载地址:https://ffmpeg.org/download.html#build-windows 按图中显示点进去。根据需要选择适合自己系统的发行版,我这里用提ffmpeg-master-latest-win64-gpl.zip

FFmpeg下载页面

image-20230627234428587

解压后可以看到bin文件夹里有三个exe文件,我们主要用到其中两个。

FFmpeg工具文件

image-20230627234730729

四、解决

  1. 首先查看原来的视频编码
                       ffmpeg.exe -i d:\xxx.mp4        

    小坑:看百度别人查到的格式会比较明显的输出h264或h265的,我这里什么都没显示,鬼知道是啥格式。
    无法识别的编码格式

    image-20230627235202422
  2. 转换格式

    由于看不到原视频编码格式,只好决定先将现有视频转为h264的。

               ffmpeg.exe -i 源路径.mp4 -vcodec h264 目标路径.mp4        

  3. 转换后的格式

    查看转换后的格式,终于能显示h264了,将转换后的视频上传,正常播放,收工!

    转换后成功识别h264编码

    image-20230627235428137

问题总结

  • 根本原因:浏览器对视频编码格式的兼容性问题,Chrome只支持H.264编码的MP4视频

  • 解决方法:使用FFmpeg工具将视频转换为H.264编码格式

  • 工具推荐:FFmpeg是处理音视频格式转换的强大工具

  • 经验教训:Web端视频播放需要考虑浏览器兼容性,建议统一转换为标准编码格式