在使用Video.js播放MP4视频时，如果遇到只有声音没有画面的情况，这通常与视频文件的编码格式、浏览器兼容性或Video.js的配置有关。以下是一些可能的解决步骤和原因分析：
1. 检查视频编码
MP4视频支持多种编码格式，但并非所有编码都能在所有浏览器或播放器中无缝播放。特别是，AVC（H.264）编码是广泛支持且被认为是MP4的标准编码。如果视频使用的是其他编码（如MPEG4(DivX)、MPEG4(Xvid)等），可能会出现兼容性问题。
使用 H264视频编码 和 AAC音频编码
示例：
解决步骤：
方式一：
- 使用视频转换工具（如格式工厂）将视频转换为AVC（H.264）编码的MP4格式。或者在线转换工具：转换为MP4在线 - 免费视频转换工具
- 转换后，再次尝试使用Video.js播放视频，看是否解决了问题。
方式二：
后台将视频转换成H264视频编码进行播放
jar包，可以在maven库搜索下载：
ws.schild jave-core：2.4.5
ws.schild jave-native-win64：2.4.5
（1）pom中加入这两个依赖：
<!-- https://mvnrepository.com/artifact/ws.schild/jave-core -->
<dependency>
<groupId>ws.schild</groupId>
<artifactId>jave-core</artifactId>
<version>2.4.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/ws.schild/jave-native-win64 -->
<dependency>
<groupId>ws.schild</groupId>
<artifactId>jave-native-win64</artifactId>
<version>2.4.5</version>
</dependency>
（2）代码如下：
package org.springeos.modules.quartz.m3u8.main;
import ws.schild.jave.*;
import java.io.File;
import java.io.IOException;
public class test {
public static void main(String[] args) throws IOException {
File source = new File("source.avi");
File target = new File("target.avi");
AudioAttributes audio = new AudioAttributes();
audio.setCodec("libmp3lame");//音频编码格式
//audio.setBitRate(new Integer(56000));//设置比特率，比特率越大，转出来的音频越大（默认是128000，最好默认就行，有特殊要求再设置）
audio.setChannels(new Integer(1));
audio.setSamplingRate(new Integer(22050));
VideoAttributes video = new VideoAttributes();
video.setCodec("libx264");//视屏编码格式
//video.setBitRate(new Integer(56000));//设置比特率，比特率越大，转出来的视频越大（默认是128000,最好默认就行，有特殊要求再设置）
video.setFrameRate(new Integer(15));//数值设置小了，视屏会卡顿
EncodingAttributes attrs = new EncodingAttributes();
attrs.setFormat("mp4");
attrs.setAudioAttributes(audio);
attrs.setVideoAttributes(video);
Encoder encoder = new Encoder();
MultimediaObject multimediaObject=new MultimediaObject(source);
try {
encoder.encode(multimediaObject,target,attrs);
}catch (IllegalArgumentException e){
e.printStackTrace();
}catch (InputFormatException e){
e.printStackTrace();
}catch (EncoderException e){
e.printStackTrace();
}
}
}
2. 检查浏览器兼容性
虽然现代浏览器大多支持HTML5视频和Video.js，但仍有可能存在某些特定的兼容性问题。
解决步骤：
- 尝试在不同的浏览器（如Chrome、Firefox、Safari等）中播放视频，看问题是否依旧存在。
- 如果在某个浏览器中能够正常播放，而在另一个浏览器中不能，那么可能是该浏览器的兼容性问题。
3. 检查Video.js配置
Video.js的配置也可能影响视频的播放效果。
解决步骤：
- 确保Video.js的库文件已正确加载到页面中。
- 检查Video.js的初始化代码，确保没有错误或遗漏。
- 查看Video.js的文档或社区，看是否有关于此问题的讨论或解决方案。
4. 检查视频文件本身
有时候，视频文件本身可能存在问题，如损坏、不完整或编码错误。
解决步骤：
- 尝试使用其他播放器（如VLC、QuickTime等）播放视频，看是否能正常显示画面。
- 如果其他播放器也无法播放画面，那么可能是视频文件本身的问题。
5. 清除浏览器缓存
有时候，浏览器缓存中的旧文件可能会导致播放问题。
解决步骤：
- 清除浏览器的缓存和Cookie。
- 重新加载页面并尝试播放视频。
6. 检查网络问题
如果视频是从远程服务器加载的，网络问题也可能导致视频播放异常。
解决步骤：
- 检查网络连接是否稳定。
- 尝试使用其他网络环境（如切换到移动数据）来播放视频。
综上所述，当使用Video.js播放MP4视频只有声音没有画面时，可以从视频编码、浏览器兼容性、Video.js配置、视频文件本身、浏览器缓存和网络问题等多个方面进行排查和解决。