Skip to content

Instantly share code, notes, and snippets.

@bkeepers
Last active June 25, 2021 14:57
Show Gist options
  • Save bkeepers/4979576 to your computer and use it in GitHub Desktop.
Save bkeepers/4979576 to your computer and use it in GitHub Desktop.
Keep two HTML5 video elements in sync.
videos = document.getElementsByTagName('video')
new VideoSync(videos[0], videos[1])
# 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
@mehmoodak
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment