React Native webview中video播放MP4格式视频只有音频

参考文章:https://blog.csdn.net/shaobo8910/article/details/81121965?utm_source=blogxgwz8

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

<video preload=”none” controls>
<source src=”video.mp4″ type=”video/mp4″>
</video>
但是在网页中我点击播放的时候,却发现只有声音而没有图像。不过我用电脑中的视频播放器播放这段视频还是可以看到图像的。那么问题来了,这个锅谁来背?

问题出在哪

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

解决方法

既然知道了问题出在哪,接下来就要想办法把我现有的视频文件转码成H.264编码的文件。
我使用的是Mac, 而且之前并没有装过什么视频转码的应用,搜索了一下发现Mac自带一个功能叫“编码所选视频文件”,我尝试着使用了一下。发现然并卵,生成的文件就像我在浏览器中播放的一样,只有声音没有图像,大概这个功能更适合吧其他格式的文件转换成MP4吧。
经过进一步搜索,发现了ffmpeg这个神器,使用这个命令行的工具,最终完成了视频编码的转换,下面详细介绍一下转换的方法

安装并使用 ffmpeg

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

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

ffmpeg -i input.mp4 -vcodec h264 output.mp4
自行替换input和output文件名就可以了,其实这里input文件还可以是其他格式的视频文件,ffmpeg可以自动识别转换的方式,非常便利!
经过上述转换,使用输出的文件在Chrome上播放就没有问题了



发表评论

电子邮件地址不会被公开。