要播放多个可见的视频元素，可以使用HTML5的video标签和JavaScript来实现。以下是一个示例代码：

HTML部分：

CSS部分：

.video-container {
  width: 100%;
  max-width: 500px;
  margin-bottom: 20px;
}

JavaScript部分：

// 获取所有video元素
var videos = document.querySelectorAll('video');

// 为每个video元素添加一个事件监听器，当视频播放时，暂停其他视频
videos.forEach(function(video) {
  video.addEventListener('play', function() {
    pauseAllVideos(video);
  });
});

// 暂停所有视频，除了当前播放的视频
function pauseAllVideos(currentVideo) {
  videos.forEach(function(video) {
    if (video !== currentVideo) {
      video.pause();
    }
  });
}

在上述代码中，我们首先使用video标签来创建多个可见的视频元素。每个video标签都有一个唯一的id和一个source标签，用于指定视频文件的URL和MIME类型。

接下来，我们使用JavaScript来获取所有的video元素，并为每个video元素添加一个play事件的监听器。当某个视频开始播放时，会调用pauseAllVideos函数来暂停其他所有的视频。

pauseAllVideos函数会遍历所有的video元素，如果某个video元素不是当前正在播放的视频，就调用pause()方法暂停该视频。

最后，我们可以使用CSS来设置video-container类的样式，以便适应不同的布局。