Vue系列：Vue Element UI中，使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能

最近在工作中有个政务大屏用到了视频播放；

技术栈是Vue2、Element UI；
要实现的功能是：使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能

具体可以按照以下步骤进行操作：

1. 引入插件： 在Vue组件中引入Element UI的按钮组件：import { Button } from 'element-ui';
2. 新建组件： 抽出来做成一个组件，在实际页面使用时直接引入，传相应的属性即可； 组件创建一个data属性来存储当前音频文件的状态和相关信息，如音频文件是否正在播放、当前播放时间等。
3. 组件样式设计： 在模板中使用Element UI的按钮组件，并在每个按钮上绑定对应的事件处理函数，例如点击“播放”按钮后会触发playAudio()函数。
4. 组件功能设计： 在事件处理函数中调用HTML5的Audio API来控制音频的播放、暂停、继续播放和重新播放功能。可以通过new Audio('audio_file_url')方法创建一个新的音频对象，通过设置相关的属性和调用对应的方法来控制音频的状态和行为。 对于停止后继续播放的功能，需要记录当前音频文件的播放位置，在继续播放时将其作为参数传入Audio对象的currentTime属性中即可。

以下实例为关键代码，演示了如何在Vue Element UI中实现播放、暂停、继续播放和重新播放功能：

<template><div><el-button@click="playAudio">播放</el-button><el-button@click="pauseAudio">暂停</el-button><el-button@click="resumeAudio">继续播放</el-button><el-button@click="restartAudio">重新播放</el-button></div></template><script>import{ Button }from'element-ui';exportdefault{components:{
    Button,},data(){return{audio:null,// 当前音频对象isPlaying:false,// 音频是否正在播放currentTime:0,// 当前播放时间};},methods:{playAudio(){if(!this.audio){this.audio =newAudio('audio_file_url');this.audio.addEventListener('ended',()=>{// 播放完成后重新播放this.currentTime =0;this.isPlaying =false;this.audio.currentTime =0;});}this.audio.play();this.isPlaying =true;},pauseAudio(){if(this.audio){this.audio.pause();this.isPlaying =false;}},resumeAudio(){if(this.audio &&!this.isPlaying){this.audio.currentTime =this.currentTime;this.audio.play();this.isPlaying =true;}},restartAudio(){if(this.audio){this.audio.currentTime =0;this.audio.play();this.isPlaying =true;}},},};</script>