HTML:将单独的音频附加到视频不起作用 [英] HTML: Attaching a seperate audio to a video not working

问题描述

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

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>

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

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.

推荐答案

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

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.

尝试这样的事情:

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

这篇关于HTML:将单独的音频附加到视频不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！