Skip to content

Instantly share code, notes, and snippets.

Last active Jun 25, 2021
What would you like to do?
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', =>
@primary.addEventListener 'pause', => @secondary.pause()
@primary.addEventListener 'timeupdate', @sync
@primary.addEventListener 'seeking', @sync
sync: =>
@secondary.currentTime = @primary.currentTime if @ready
Copy link

mehmoodak commented Aug 9, 2020

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