reactnativemysql_ReactNative

参考文章&＃xff1a;https://blog.csdn.net/shaobo8910/article/details/81121965?utm_source&＃61;blogxgwz8

昨天遇到了这样一个问题&＃xff0c;我打算使用HTML5的video标签简单的在网页上插入一个MP4视频&＃xff0c;类似这样

但是在网页中我点击播放的时候&＃xff0c;却发现只有声音而没有图像。不过我用电脑中的视频播放器播放这段视频还是可以看到图像的。那么问题来了&＃xff0c;这个锅谁来背&＃xff1f;

问题出在哪

经过一些搜索得知&＃xff0c;其实根本的问题是虽然大家都是.mp4后缀的文件&＃xff0c;但是编码方式不同&＃xff0c;而video标签的标准是用H.264方式编码视频的MP4文件(当然video标签还可以播放WebM和OGG格式的文件&＃xff0c;这里就不多说了)&＃xff0c;而我之前使用的视频文件是Xvid编码的MP4文件,所以只能播放出音频而不能看到图像

解决方法

既然知道了问题出在哪&＃xff0c;接下来就要想办法把我现有的视频文件转码成H.264编码的文件。

我使用的是Mac, 而且之前并没有装过什么视频转码的应用&＃xff0c;搜索了一下发现Mac自带一个功能叫“编码所选视频文件”&＃xff0c;我尝试着使用了一下。发现然并卵&＃xff0c;生成的文件就像我在浏览器中播放的一样&＃xff0c;只有声音没有图像&＃xff0c;大概这个功能更适合吧其他格式的文件转换成MP4吧。

经过进一步搜索&＃xff0c;发现了ffmpeg这个神器&＃xff0c;使用这个命令行的工具&＃xff0c;最终完成了视频编码的转换&＃xff0c;下面详细介绍一下转换的方法

安装并使用 ffmpeg

我使用的是Mac&＃xff0c;并且安装了homebrew&＃xff0c;所以可以直接通过homebrew安装ffmpeg

brew install ffmpeg

其实ffmpeg的指令有很多&＃xff0c;想要详细了解可以参见ffmpeg参数中文详细解释&＃xff0c;这里我只需要把一个其他编码格式的MP4文件转换成H.264编码的MP4文件&＃xff0c;具体指令如下

ffmpeg -i input.mp4 -vcodec h264 output.mp4

自行替换input和output文件名就可以了&＃xff0c;其实这里input文件还可以是其他格式的视频文件&＃xff0c;ffmpeg可以自动识别转换的方式&＃xff0c;非常便利&＃xff01;

经过上述转换&＃xff0c;使用输出的文件在Chrome上播放就没有问题了