vue怎么把两个视频放在一个画面

要在Vue中将两个视频放在一个画面中，你可以使用HTML5的<video>标签和CSS来实现。以下是一个基本的示例：

1. 在Vue组件的模板中添加两个<video>标签，并为它们分别设置唯一的ID。

<template>
  <div class="container">
    <video id="video1" class="video"></video>
    <video id="video2" class="video"></video>
  </div>
</template>

2. 在Vue组件的样式中，使用CSS来布局和定位这两个视频元素。你可以使用flexbox或grid等技术来实现所需的布局。

<style>
.container {
  display: flex;
  justify-content: center;
}

.video {
  width: 50%; /* 根据需要调整宽度 */
  height: auto; /* 可根据需要调整高度 */
}
</style>

3. 在Vue组件的JavaScript代码中，使用document.getElementById()获取视频元素的引用，并设置它们的src属性为对应的视频文件路径。

<script>
export default {
  mounted() {
    const video1 = document.getElementById('video1');
    const video2 = document.getElementById('video2');

    video1.src = '/path/to/video1.mp4'; // 替换为第一个视频文件的路径
    video2.src = '/path/to/video2.mp4'; // 替换为第二个视频文件的路径
  }
};
</script>

请注意，上述示例假设你已经有两个视频文件，并且知道它们的路径。你需要将/path/to/video1.mp4和/path/to/video2.mp4替换为实际的视频文件路径。

此外，如果你还需要对两个视频进行同步播放、控制音量等操作，你可以在JavaScript中使用相应的API来实现。这超出了基本示例的范围，请根据自己的需求进一步研究相关文档和资源。