在前端开发中，实现音频和视频播放功能是常见的需求。Vue 作为一款流行的 JavaScript 框架，结合 Element-plus 组件库，能让我们高效地完成这一任务。

确保项目中已安装 Vue 和 Element-plus。若没有，可通过 npm 或 yarn 进行安装。安装完成后，就可以开始构建音频和视频播放的界面与逻辑。

对于音频播放，在 Vue 组件的模板中，借助 Element-plus 的布局组件搭建合适的样式结构，然后使用 HTML5 的 <audio> 标签来实现音频播放功能。例如：

<template>
  <div>
    <el-card title="音频播放">
      <audio ref="audioRef" src="your-audio-url.mp3" controls></audio>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const audioRef = ref(null);

// 可以在这里添加播放、暂停等逻辑
const playAudio = () => {
  audioRef.value.play();
};

const pauseAudio = () => {
  audioRef.value.pause();
};
</script>

上述代码中，通过 ref 来获取音频元素的引用，方便后续控制音频的播放与暂停。

视频播放的实现方式与之类似。在模板中使用 <video> 标签：

<template>
  <div>
    <el-card title="视频播放">
      <video ref="videoRef" src="your-video-url.mp4" controls></video>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const videoRef = ref(null);

const playVideo = () => {
  videoRef.value.play();
};

const pauseVideo = () => {
  videoRef.value.pause();
};
</script>

除了基本的播放和暂停功能，还能进一步扩展。比如，监听音频和视频的加载完成、播放结束等事件，以实现更丰富的交互。

<template>
  <div>
    <el-card title="视频播放">
      <video 
        ref="videoRef" 
        src="your-video-url.mp4" 
        controls 
        @loadeddata="onVideoLoaded" 
        @ended="onVideoEnded">
      </video>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const videoRef = ref(null);

const onVideoLoaded = () => {
  console.log('视频加载完成');
};

const onVideoEnded = () => {
  console.log('视频播放结束');
};
</script>

通过 Vue 与 Element-plus 的结合，我们不仅能轻松实现音频和视频的基本播放功能，还能根据项目需求灵活扩展各种交互逻辑，为用户带来更好的体验。