html - HTML:将单独的音频附加到视频不起作用

Question

使用React.JS并尝试使用声音渲染默认视频。问题是，我的视频和声音有单独的文件。视频工作正常，但是我不确定如何“同步”它们，以便音频和视频同时播放，并且用户可以使用视频控件停止音频。这是我当前的代码:

                  <video
                    controls
                    // controlsList="nodownload noremoteplayback"
                    width={sWidth}
                    height={sHeight}
                    autoPlay={true}
                    id={index}
                    onEnded={() => this.nextVideo(true)}
                    disablePictureInPicture={true}
                  >
                    <source
                      src={this.state.content[this.state.index][0]}
                      type="video/mp4"
                    ></source>

                    <source
                      src={this.state.content[this.state.index][1]}
                      type="video/mp4"
                      {/*type="video/ogg" */}
                    ></source>
                  </video>

音频也是.mp4文件，这可能是问题所在。

无论首先是哪个来源，都是渲染的东西，无论是视频还是音频元素。我曾尝试将音频作为视频的一部分，但这也不起作用。我该怎么办？谢谢。

Answer 1

如果您只有一个视频文件和一个音频文件，我将通过ffmpeg将它们重新编码为一个文件。这将确保无论使用什么浏览器，这两个音轨都不会同步。

尝试这样的事情:

ffmpeg -i videofile.mp4 -i audiofile.mp4 -map 0:v -map 1:a -c copy -shortest combined.mp4