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)