videojs 播放mp4视频只有声音没有画面问题

在使用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配置、视频文件本身、浏览器缓存和网络问题等多个方面进行排查和解决。