Как смешивать аудио в 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> 

Мне нужно смешать в звуковом файле, так что, когда пользователь запускает видео, аудио файл воспроизводится вместе с видео, и когда фильм останавливается/перематывает звук будет делать то же самое. Я не нашел в API HTML5/аудио API никакой функциональности, которая позволила бы мне это сделать. Кто-нибудь знает, возможно ли это?

Я думаю, у меня есть два отдельных элемента на странице: один для видео и один для аудио, и их контролирует сценарий, который перехватывает события с видеоплеера, но я думал, что, возможно, есть способ сделать это используя API? Я знаю, что для аудио я могу смешивать разные файлы, но могу ли я сделать то же самое с видео?

Answer 1

Я не так хорош в этом. Но этот код был полезен для меня, и он должен работать и на вас.

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

Answer 2

Вы должны слушать events из html5 video. В вашем случае это должно быть playpauseended и seekinghere 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 (вашVideoElement.currentTime)