Synchronize video and audio (preferably without JavaScript)

Question

If I have HTML5 video and audio elements, is there a clean way to keep them in sync? They should act like a video file that contains an audio track

Answer 1

You can use Promise.all(), fetch() to retrieve media resource as a Blob, URL.createObjectURL() to create a Blob URL of resource; canplaythrough event and Array.prototype.every() to check if each resource can play; call .play() on each resource when both resources can play

I didn't make it clear in the question. I meant that the two tracks should stay in sync as though playing a regular video file with audio.

One approach could be to create a timestamp variable, utilize seeked event to update .currentTime of elements when set variable is greater than a minimum delay to prevent .currentTime being called recursively.

  load media
  

  
loading media...
  

plnkr http://plnkr.co/edit/r51oh7KsZv8DEYhpRJlL?p=preview