Keep two HTML5 video elements in sync.

usage.coffee

videos = document.getElementsByTagName('video')
new VideoSync(videos[0], videos[1])

video_sync.coffee

# Keep two HTML5 video elements in sync.
#
# @primary   - primary video with controls and audio
# @secondary - secondary video,
class @VideoSync
  constructor: (@primary, @secondary) ->
    @ready = false

    @secondary.addEventListener 'canplay', => @ready = true

    @primary.addEventListener 'play', => @secondary.play()
    @primary.addEventListener 'pause', => @secondary.pause()
    @primary.addEventListener 'timeupdate', @sync
    @primary.addEventListener 'seeking', @sync

  sync: =>
    @secondary.currentTime = @primary.currentTime if @ready

Thanks Brandon, this proof to be very helpful for me 👍

I wrote a similar implementation in TypeScript & RxJS but only amend it a bit to removeEventListeners when I am done with it (to save memory leak)

I just used this basic idea but the secondary video lags like crazy if sync is called every single timeupdate. I just added a bit that checks if the videos are offset by some specific amount then it syncs them up (if Math.abs(primary.currentTime - secondary.currentTime) > 0.3 or whatever) and it works perfectly. Just thought I'd post it here in case someone else comes here looking for this method 🫡