Video Integration: Playback Control

Custom code
1

Hey readymag community,

I am looking for some help with video integration. Currently, our video heavy website uses the readymag widget to embed video from our hosting solution. Simian (gosimian.com). Overall, it works great HOWEVER, multiple videos sometimes play simultaneously, if a visitor doesn’t hit pause first.

Does anyone know how to create some kind of event where pressing play on one video widget will pause all others?

Alternatively, perhaps we could create a “video gallery” with one playback control surface?

Would love to find a developer who has some insight here. Please reach out to discuss!

2

hey,

this isn´t that complicated using javascript…

would be something like this:

<script>
// Get all video elements on the current page
const videoElements = document.querySelectorAll("video"); 

for (const videoEl of videoElements) {
  // Listen to clicks on every one of the videos
  videoEl.onclick = () => {
    if (videoEl.paused) {
      for (const video of videoElements) {
        // When starting to play one video, pause all others
        video.pause();
      }
      videoEl.play();
    } else {
      videoEl.pause()
    }
  }
}
</script>
1 Like