如何将音频混入 html5 视频？

Question

我有一个video 元素，例如

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

我需要混入一个音频文件，这样当用户开始播放视频时，音频文件会与视频一起播放，而当电影停止/倒带时，音频也会这样做。我没有在 HTML5 视频/音频 API 中找到任何可以让我这样做的功能。有谁知道这是否可能？

我想我可以在页面上有两个单独的元素，一个用于视频，一个用于音频，并让它们由拦截来自视频播放器的事件的脚本控制，但我认为也许有一种方法可以使用API？我知道对于音频我可以混合不同的文件，但我可以对视频做同样的事情吗？

Answer 1

你必须听html5 video的events。在您的情况下，这应该是 play pause ended 和 seeking here is an example player 列出所有事件。

//HTML
<video id="videoInHTML" width="320" height="240" controls="controls">.....

//Javascript
var yourVideoElement = document.getElementById("videoInHTML");
yourVideoElement.addEventListener('play', videoPausePlayHandler, false);
yourVideoElement.addEventListener('pause', videoPausePlayHandler, false);

function videoPausePlayHandler(e) {
  if (e.type == 'play') {
    // play your audio
  } else if (e.type == 'pause') {
    // pause your audio
  }
}

在黑暗中寻找。收听seeking 事件。如果玩家正在寻找 = true -> yourAudioFile.seekToTime( yourVideoElement.currentTime )

Answer 2

我不太擅长。但是这些代码对我很有用，它也应该对你有用。

<!DOCTYPE>
<meta charset="UTF-8">
<title> audio video</title>

<audio id="audioInHTML" controls="controls">     
<source src="audio.wav" type="audio/wav"/>
</audio>
</div>

<video id="videoInHTML" width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>

<div id="playButtonDiv" </div>

<form>
<input type="button" value="PlaySoundAndVideo" onClick="PlaySoundAndVideo('videoInHTML'),PlaySoundAndVideo('audioInHTML')">

</div>

<script>

function PlaySoundAndVideo(soundObj,videoObj) {
var soundAndVideo=document.getElementById(soundObj,videoObj);
soundAndVideo.play();
}


</script>

<style type="text/css">


#playButtonDiv {
position:absolute;
top:800px;

};   

</style>