【HTML】HTML5 video播放有声音无图像的解决方法

1.概述

今天遇到一个问题，HTML5 video播放有声音无图像，该视频本地是能播放的。

使用html播放的时候只有声音没有视频，一片漆黑。而且奇怪的是我试过我们300M到1G之间的视频是有问题的，但是300M以下的，或者1G的视频都是没有问题的。

后来查看AI，无法播放300MB的视频文件，而且只有声音没有视频，可能有以下几个原因：

1. 浏览器限制：

浏览器缓存问题： 尝试清除浏览器缓存并重新加载页面。有时候浏览器可能会缓存较小的视频文件，但对于较大的文件可能无法正确处理缓存。

浏览器插件问题： 检查是否安装了浏览器插件，这些插件可能会影响视频的播放。尝试在无插件模式下打开浏览器，或者尝试在不同的浏览器中播放视频。

这个我试过，采用不同的浏览器，都不行。

2. 网络问题：

网络带宽限制： 较大的视频文件需要更大的带宽来进行流畅的播放。如果你的网络连接速度较慢，可能无法及时加载大型视频文件，导致只有声音没有视频。

服务器带宽限制： 如果视频文件托管在服务器上，确保服务器的带宽足够大，能够支持快速传输大文件。

这个因为我们是本地播放，所以没有这个问题。

3. 视频编码问题：

视频编码格式： 确保视频文件的编码格式（如H.264）在浏览器中得到支持。不同的浏览器支持不同的视频编码格式，如果视频文件使用了不被浏览器支持的编码，可能会导致只有声音没有视频。

这个编码问题，感觉最像我们的。

视频分辨率和帧率： 较高的分辨率和帧率会增加视频文件的大小。尝试减小视频的分辨率和帧率，或者使用更高效的压缩算法，以减小文件大小。

4. 硬件问题：

设备性能： 播放大型视频文件需要较高的硬件性能，包括处理器、内存和显卡。如果你的计算机性能较低，可能无法处理较大的视频文件，导致只有声音没有视频。

5. 文件完整性问题：

文件完整性： 检查300MB的视频文件是否完整，可能文件损坏或不完整导致播放错误。你可以尝试使用视频编辑软件或者专门的文件检查工具来验证文件的完整性。

6. 浏览器插件和扩展：

浏览器插件和扩展： 某些浏览器插件和扩展可能会干扰视频播放。尝试在浏览器中禁用所有插件和扩展，然后重新尝试播放视频。

如果以上方法都无法解决问题，建议尝试使用不同的视频播放器或者将视频文件转换为不同的格式，看看是否能够正常播放。如果问题依然存在，有可能是视频文件本身出现了问题，你可能需要重新获取一个完整且正确的视频文件。

最后百度：http://www.itwebs.cn/ArticleInfo/30.html 根据文章

用QQ影音播放器查看文件信息-编码信息，它是错误的

视频流信息里的编码格式是MPEG-4V的，而html5 video标签支持Ogg、MPEG4(mp4)、WebM三种视频格式，分别支持的视频编码如下：

MPEG4 - H.264视频编码、AAC音频编码
Ogg - Theora视频编码、Vorbis音频编码
WebM - VP8视频编码、Vorbis音频编码

正确MP4视频文件编码格式应该是这样的

MP4有3种编码，mpg4(xdiv),mpg4(xvid)，avc(h264)，只有h264才是公认的MP4标准编码。

最后直接使用QQ影音进行转码转成h264，就好了。