Bagaimana untuk merangkum dan melaksanakan elemen audio dan video dalam Vue?

Vue ialah rangka kerja bahagian hadapan yang memudahkan pembinaan dan pembangunan aplikasi web. Antaranya, fungsi audio dan video adalah penting dalam banyak pelaksanaan Atas sebab ini, Vue menyokong elemen asas seperti audio dan video.

Walau bagaimanapun, untuk melaksanakan pengkapsulan dan pelaksanaan fungsi elemen ini dalam Vue, beberapa kerja tambahan diperlukan. Artikel ini akan menerangkan kaedah dan teknik untuk merangkum dan melaksanakan elemen audio dan video dalam Vue.

Mengapa merangkum elemen audio dan video?

Apabila menulis aplikasi, kami ingin mengikut "Prinsip Tanggungjawab Tunggal" sebanyak mungkin, yang juga terpakai pada operasi kami pada elemen audio dan video. Untuk elemen audio dan video, kami mahu mereka melaksanakan fungsi mereka yang paling penting sahaja: memainkan bunyi dan video.

Konsep enkapsulasi sangat penting dalam bahasa pengaturcaraan berorientasikan objek, tetapi ia sama berguna dalam Vue. Enkapsulasi membantu kami memudahkan kod kami dan mengumpulkannya kepada bahagian kecil yang boleh digunakan semula.

Untuk menggunakan konsep ini pada Vue, kami boleh menggunakan teknologi pengkapsulan komponen tersuai untuk merangkum elemen audio dan video.

Melaksanakan enkapsulasi audio dan video

Untuk merangkum elemen audio dan video ke dalam komponen Vue tersuai, cara paling asas ialah menggunakan <audio> atau <video> teg dan letakkannya dalam atribut <code>template komponen. Contohnya: <audio> 或 <video> 标签，并将其放置在组件的 template 属性中。例如：

<template>
  <div>
    <audio :src="url" ref="audioRef"></audio>
  </div>
</template>

上述代码中，<audio> 标签的 src 属性绑定了组件中定义的 url data 属性。这里额外定义了一个 ref="audioRef" 属性，用于在 JavaScript 中引用该元素。

接下来，在该组件内部，我们可以定义相关的 JavaScript 代码，以便于我们在其他地方对其进行操作。例如，我们可以添加以下代码：

export default {
  // ...
  data() {
    return {
      url: "/path/to/audio/file",
      playing: false,
      muted: false
    };
  },
  methods: {
    playAudio() {
      const audio = this.$refs.audioRef;
 
      if (audio.paused) {
        audio.play();
      } else {
        audio.pause();
      }
      this.playing = !this.playing;
    },
    toggleMute(){
      const audio = this.$refs.audioRef;
      audio.muted = !audio.muted;
      this.muted = !this.muted;
    }
   }
  // ...
}

该代码确定了两个有用的操作，即进行音频的播放或暂停，并静音或取消静音。该组件可根据数据属性 (例如 playing 和 muted) 来切换音频的状态。我们可以这样在组件的模板 (template) 中使用这些方法:

<template>
  <div>
    <audio :src="url" ref="audioRef"></audio>
    <button @click="playAudio">{{ playing ? 'Pause' : 'Play' }}</button>
    <button @click="toggleMute">{{ muted ? 'Unmute' : 'Mute' }}</button>
  </div>
</template>

这里的两个按钮将分别触发playAudio()和toggleMute()方法。

我们可以以类似的方式来封装视频元素，只需要使用 <video> 标签，并将其属性嵌入到 Vue 的组件模板中即可。

进一步封装

我们还可以进一步扩展这个基本的音频/视频组件，以便它们可以在组件之间进行通信。例如，在两个不同的音频组件之间切换，我们可以使用集中的状态管理器，例如 Vuex。

在 Vuex 中，我们可以定义一个全局状态，例如audioState。我们可以在音频组件中定义一个 mutation，以便它们可以通过操作该状态来进行通信。

例如，我们可以在 Vuex 状态中存储当前正在播放的音频文件路径，并在组件中添加一个计算属性来获取该路径。在组件中，我们可以将该计算属性放到我们音频组件的 template

// 在 Vuex 中定义全局状态
state: {
  audioState: {
    currentAudio: null
  }
},
mutations: {
  setCurrentAudio(state, payload){
    state.audioState.currentAudio = payload;
  }
}

// 在音频组件中添加计算属性，获取当前播放的音频文件
computed: {
  currentAudio(){
    return this.$store.state.audioState.currentAudio;
  }
}

// 在组件的模板中，添加一个方法来监听 Vuex 状态的变化
watch: {
  currentAudio(val){
    if (val && val !== this.url){
      this.url = val;
      this.playAudio();
    }
  }
}

Dalam kod di atas, atribut src bagi teg <audio> terikat pada atribut data url yang ditakrifkan dalam komponen. Atribut ref="audioRef" tambahan ditakrifkan di sini untuk merujuk elemen dalam JavaScript.

Seterusnya, di dalam komponen, kita boleh menentukan kod JavaScript yang berkaitan supaya kita boleh mengendalikannya di tempat lain. Sebagai contoh, kita boleh menambah kod berikut:

rrreee

Kod ini mengenal pasti dua tindakan berguna, iaitu memainkan atau menjeda audio dan meredam atau menyahredamkannya. Komponen ini menogol keadaan audio berdasarkan sifat data seperti memainkan dan redam. Kita boleh menggunakan kaedah ini dalam templat komponen seperti ini:

rrreee

Dua butang di sini akan mencetuskan kaedah playAudio() dan toggleMute(). 🎜🎜Kami boleh merangkum elemen video dengan cara yang sama, hanya gunakan teg <video> dan benamkan atributnya ke dalam templat komponen Vue. 🎜🎜Ekapsulasi Lanjut🎜🎜Kami juga boleh memanjangkan lagi komponen audio/video asas ini supaya mereka boleh berkomunikasi antara komponen. Sebagai contoh, untuk bertukar antara dua komponen audio yang berbeza, kita boleh menggunakan pengurus keadaan berpusat seperti Vuex. 🎜🎜Dalam Vuex, kita boleh mentakrifkan keadaan global, seperti audioState. Kita boleh menentukan mutasi dalam komponen audio supaya mereka boleh berkomunikasi dengan memanipulasi keadaan itu. 🎜🎜Sebagai contoh, kita boleh menyimpan laluan fail audio yang sedang dimainkan dalam keadaan Vuex dan menambah sifat yang dikira dalam komponen untuk mendapatkan laluan. Dalam komponen, kami boleh meletakkan sifat yang dikira ini ke dalam templat template komponen audio kami untuk mencetuskan main balik audio. 🎜rrreee🎜Dengan cara ini, kita boleh mengawal keadaan main balik elemen audio sesuka hati tanpa perlu mengendalikan logik ini secara berasingan dalam setiap komponen. 🎜🎜Dalam contoh ini, kami juga boleh memautkan operasi komponen audio yang berbeza kepada Vuex untuk membolehkan perkongsian data dan interaksi antara berbilang komponen Vue. Ini akan menjadikan kod kami lebih boleh digunakan semula, boleh diselenggara dan mengurangkan usaha ujian regresi. 🎜🎜Ringkasnya, merangkum komponen audio dan video membolehkan kami menggunakan semula dan mengekalkan kod dengan mudah. Dengan bantuan pengurusan negeri Vuex, kami boleh melaksanakan perkongsian dan operasi fail audio dan video dengan mudah antara komponen yang berbeza dalam aplikasi. 🎜

Atas ialah kandungan terperinci Bagaimana untuk merangkum dan melaksanakan elemen audio dan video dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!