Loading a mute video with a separate audio into a HTML5 video tag

Question

I need to load a mute video and an audio file into the same html5 video tag. I tried to find this, but I only found texts about audio tag, which is not what I am looking for.

I need something like this:

<video controls="controls" poster="poster.jpg" width="640" height="360">
  <source src="08_gestao_documental_autoridades_brasileiras_SEM_AUDIO.mp4" type="video/mp4">
  <source src="autoridades_brasileiras.mp3" type="audio/mp3">
 </video>

Answer 1

That's not how source works. The source elements are really alternatives: if the browser doesn't support one, it will go to the next, until it reaches one that is supported and played, then only that one will play (and the others will be ignored).

You cannot have two sources (a video and an audio) playing at the same time under the same video/audio tag. As you found online, if you want to have two media elements (the muted video and the audio) you will need two media tags.

Then, and at least in theory (and if I didn't misunderstand), you could use mediagroup to control and sync both audio and video elements so they are streamed together; but mediagroup is not well supported... or at least I haven't been able to make it work, but you may want to look into it because, as I said, I may have misunderstood how it works :-S

---

One alternative solution would be to have the audio inside the video (as the fallback code), then synchronize them using JavaScript. Something like this:

<video id="myvideo" controls muted>
    <source src="path/to/video.mp4" type="video/mp4" />
    <audio id="myaudio" controls>
        <source src="path/to/audio.mp3" type="audio/mpeg"/>
    </audio>
</video>

<script>
var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
myvideo.onplay  = function() { myaudio.play();  }
myvideo.onpause = function() { myaudio.pause(); }
</script>

You can see an example on this JSFiddle.