如何使用父容器控制一组视频？

<div id="video-container">
  <video src="video1.mp4" controls></video>
  <video src="video2.mp4" controls></video>
  <video src="video3.mp4" controls></video>
</div>

#video-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

video {
  width: 300px;
  height: 200px;
  margin: 10px;
}

var container = document.getElementById("video-container");
var videos = container.getElementsByTagName("video");

// 控制所有视频同时播放
function playVideos() {
  for (var i = 0; i < videos.length; i++) {
    videos[i].play();
  }
}

// 控制所有视频同时暂停
function pauseVideos() {
  for (var i = 0; i < videos.length; i++) {
    videos[i].pause();
  }
}

// 控制所有视频的音量
function setVolume(volume) {
  for (var i = 0; i < videos.length; i++) {
    videos[i].volume = volume;
  }
}