Vue实现播放视频收音频

要在 Vue 中实现播放视频同时收听音频，你可以按照以下步骤进行操作：

1. 在 Vue 组件中引入 video.js 或其他视频播放库，并在模板中添加 video 标签，例如：

<template>
  <div>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
      poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
      <source src="MY_VIDEO.mp4" type='video/mp4'>
      <source src="MY_VIDEO.webm" type='video/webm'>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
      </p>
    </video>
  </div>
</template>

2. 在 video 标签中添加 `<audio>` 标签，用于播放音频：

<template>
  <div>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
      poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
      <source src="MY_VIDEO.mp4" type='video/mp4'>
      <source src="MY_VIDEO.webm" type='video/webm'>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
      </p>
      <audio id="my-audio" src="MY_AUDIO.mp3"></audio>
    </video>
  </div>
</template>

3. 在 Vue 组件的方法中，添加事件监听器，用于在视频播放时同时播放音频：

<template>
  <div>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
      poster="MY_VIDEO_POSTER.jpg" data-setup="{}" @play="playAudio">
      <source src="MY_VIDEO.mp4" type='video/mp4'>
      <source src="MY_VIDEO.webm" type='video/webm'>
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
      </p>
      <audio id="my-audio" src="MY_AUDIO.mp3"></audio>
    </video>
  </div>
</template>

<script>
import videojs from 'video.js';

export default {
  methods: {
    playAudio() {
      const audio = document.getElementById('my-audio');
      audio.currentTime = 0;
      audio.play();
    }
  },
  mounted() {
    // 初始化视频播放器
    videojs('my-video');
  }
};
</script>

在上面的代码中，我们在 video 标签上添加了 `@play` 事件监听器，当视频播放时会触发 `playAudio` 方法，该方法会获取到音频元素并将其播放。需要注意的是，我们在播放音频前将音频的 `currentTime` 设置为 0，以确保每次播放都是从音频的开头开始。

以上就是在 Vue 中实现播放视频同时收听音频的简单示例。实际应用中，你可能还需要考虑音视频的加载、播放控制等问题。