Syncing Html5 With Playback

I am having track from one source, mute, and I'd like to play background music over it using element. The tracks contain some time critical elements. What would be the options to

Solution 1:

Mikko Ohtamaa provided a solution in a comment, which I actually think is the best option here - it doesn't require a framework, and it doesn't require you to edit your video files.

Essentially, just grab the current time from the video element when it is "unmuted", and apply that time to the audio element. Some code might look like this:

functionunmute() {
  var vid = document.getElementById("video");
  var aud = document.getElementById("audio");

  aud.currentTime = vid.currentTime;
  aud.play();

}

Solution 2:

Here is a simple solution using Popcorn.js inspired by this article.

$(function(){
var medias = {
    audio: Popcorn("#narration"),
    video: Popcorn("#video")
  },
  loadCount = 0,
  events = "play pause timeupdate seeking volumechange".split(/\s+/g); 


// iterate both media sourcesPopcorn.forEach(medias, function(media, type) {

  // when each is ready... 
  media.on("canplayall", function() {

    // trigger a custom "sync" eventthis.emit("sync");

    // Listen for the custom sync event...    
  }).on("sync", function() {

    // Once both items are loaded, sync eventsif (++loadCount == 2) {
      // Uncomment this line to silence the video//medias.video.mute();// Iterate all events and trigger them on the video // whenever they occur on the audio
      events.forEach(function(event) {

        medias.video.on(event, function() {

          // Avoid overkill events, trigger timeupdate manuallyif (event === "timeupdate") {

            if (!this.media.paused) {
              return;
            }
            medias.audio.emit("timeupdate");

            return;
          }

          if (event === "seeking") {
              medias.audio.currentTime(this.currentTime());
          }
          
          if (event === "volumechange") {  
        	  if(this.muted()) { 
        		  medias.audio.mute(); 
        	  } else {
        		  medias.audio.unmute(); 
        	  } 
        	  
        	  medias.audio.volume(this.volume());
          }

          if (event === "play" || event === "pause") {
            medias.audio[event]();
          }
        });
      });
    }
  });
});
});

<scripttype="text/javascript"src="http://code.jquery.com/jquery-git.js"></script><scripttype="text/javascript"src="https://static.bocoup.com/js/popcorn.min.js"></script><audioid="narration"><sourcesrc="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorn101/popcorn101.ogg"></audio><videoid="video"controls="controls"><sourcesrc="https://videos.cdn.mozilla.net/uploads/webmademovies/popcorntest.mp4"></video>

Solution 3:

Easy with a very simple trick ;)

<videoid="myvideo"controlsmutedloop><sourcesrc="sample_video_no_sound.mp4"type="video/mp4"/><audioid="myaudio"><sourcesrc="sound.mp3"type="audio/mpeg"/></audio></video><script>var myvideo = document.getElementById("myvideo");
    var myaudio = document.getElementById("myaudio");

    var change_time_state = true;

    myvideo.onplay = function(){
        myaudio.play();
        if(change_time_state){
            myaudio.currentTime = myvideo.currentTime;
            change_time_state = false;
        }
    }

    myvideo.onpause = function(){
        myaudio.pause();
        change_time_state = true;
    }
</script>

Solution 4:

The same effect can be achieved by including the music in your video file itself. The html5 video player controls will have the ability to mute the sound.

Solution 5:

Try VideoJS. At the time when the video playback starts when the page is loaded and ready, you are able to trigger a function which would start playing the music that is contained in the page separately.

http://videojs.com/