如何将音频混合到html5视频？ [英] how to mix in audio to html5 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中找到任何可以让我这样做的功能。有谁知道这是否可能？

I need to mix in an audio file so that when the user starts the video, the audio file plays along with the video, and when the movie stops/rewinds the audio would do the same. I did not find any functionality in the HTML5 video/audio API's that would allow me to do that. Does anyone know if this is even possible?

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

I guess I can have two separate elements on the page, one for video and one for audio and have them controlled by a script that intercepts events from the video player, but I thought that maybe there is a way to do it using the APIs? I know that for audio I can mix different files, but can I do the same with video?

推荐答案

你必须听 html5视频的事件。在你的情况下，这应该是播放 暂停 结束和寻求 这是一个示例播放器列出所有事件。

You have to listen to the events of html5 video. In your case this should be play pause ended and seeking here is an example player which lists all events.

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

在黑暗中寻找。听取寻找事件。如果玩家正在寻找= true - > yourAudioFile.seekToTime（yourVideoElement.currentTime）

Shot in the dark with seeking. Listen to the seeking Event. If player is seeking = true -> yourAudioFile.seekToTime( yourVideoElement.currentTime )

这篇关于如何将音频混合到html5视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！