本文介绍: / 播放完成后重新播放。// 音频是否正在播放

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

技术栈是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&gt;
  <div&gt;
    <el-button @click="playAudio"&gt;播放</el-button&gt;
    <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';

export default {
  components: {
    Button,
  },
  data() {
    return {
      audio: null, // 当前音频对象
      isPlaying: false, // 音频是否正在播放
      currentTime: 0, // 当前播放时间
    };
  },
  methods: {
    playAudio() {
      if (!this.audio) {
        this.audio = new Audio('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 &amp;&amp; !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>

原文地址:https://blog.csdn.net/I_nur/article/details/130318196

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_19972.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注