JSFiddle - React, Tailwind, and code Playground

by 420

HTML

<video id="video-1" class="video-bg" width="320" height="240" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video id="video-2" class="video-bg" width="320" height="240" controls>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

JavaScript

// assume only one video is playing at a time
var videoPlaying = null;

const onPlay = function() {
  if (videoPlaying && videoPlaying != this) {
    videoPlaying.pause()
  }
  videoPlaying = this
}

// init event handler
const videos = document.getElementsByClassName("video-bg")
console.log('vvv', videos)
for (let i = 0; i < videos.length; i++) {
  videos[i].addEventListener("play", onPlay)
}