如何將音頻混合到html5視頻？

我有一個video元素，例如如何將音頻混合到html5視頻？

<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？我知道對於音頻我可以混合不同的文件，但是我可以對視頻執行相同的操作嗎？

來源

2013-11-25 akonsu

我並不擅長。但是這些代碼對我很有用，它也適用於你。

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

來源

2013-11-25 21:26:42

謝謝。此代碼控制頁面上的兩個獨立元素。是否有'video'元素上的API，我可以使用它來使其使用特定的音頻流/文件？ – akonsu

你要聽的html5 video的events。在你的情況下，這應該是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（yourVideoElement.currentTime）

來源

2013-11-26 09:17:29 longilong

如何將音頻混合到html5視頻？

回答

相關問題