HTML: Attaching a seperate audio to a video not working

问题

Working with React.JS and trying to render a default video with sound. The issue is, I have a seperate file for the video and the sound. The video is working fine, but i'm not sure how to "synch" them, so that both the audio and the video play at the same time, and the user can use the video controls to stop the audio. Here is my current code:

                  <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>

The audio is a .mp4 file as well, which might be the issue.

Whichever source is first is what is rendering, EITHER as a video or an audio element. I have tried making audio a child of video, but that isn't working either. What should I do? Thanks.

回答1:

If you only have one video file and one audio file, I would just re-encode them as one file via ffmpeg. This will ensure that the two tracks are never out of sync no matter the browser.

Try something like this:

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

来源：https://stackoverflow.com/questions/59000838/html-attaching-a-seperate-audio-to-a-video-not-working