使用Flv.js无法播放视频

news2024/9/20 20:33:09

背景

由于项目需要，搭建了一套SRS直播服务，通过直播录制将视频报错并在本地播放。视频存储的格式为flv，所以使用flv.js插件来播放。测试时发现录制的视频无法播放，经过排查找到原因。

报错信息

控制台并无明显报错，只是flv.js在控制台疯狂打印日志

[MSEController] > MediaSource onSourceOpen
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
3logger.js:123 [MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640032
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
2logger.js:123 [MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.640032
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord!
Log.w @ logger.js:82
logger.js:123 [FLVDemuxer] > Parsed AVCDecoderConfigurationRecord
logger.js:82 [FLVDemuxer] > Found another AVCDecoderConfigurationRecord

排查经过

首先排查SRS录制是否有问题，在SRS官网查阅资料并录制flv没有相关配置。
通过视频解码查看视频文件是否损坏，排查发现视频并未损坏，并且通过VLC播放器可以正常播放。
找了一个其他的flv视频可以正常通过flv.js播放。
用其他在线播放flv的地址一个flv可以正常播放，另外一个还是无法播放，控制台输出信息一样。
后来在查阅flv相关资料，发现如下参数设置

两个视频区别为SRS录制的无音频，另外一个视频是两个流，一路视频流，一路音频流。

解决方式

尝试设置hasAudio参数为false,视频播放成功。

 if (flvjs.isSupported()) {
        const videoElement = document.getElementById(this.videoId);
        this.videoPlayer = flvjs.createPlayer({
          type: "flv", //类型
          isLive: true, //是否实时流
          hasAudio: false, //是否有音频
          hasVideo: true, //是否有视频
          url: this.videoUrl, //路径
          // segments: [], //多段播放
        });
        this.videoPlayer.attachMediaElement(videoElement);
        this.videoPlayer.load();
        this.videoPlayer.play();
 }