Rumah > hujung hadapan web > View.js > teks badan

Penjelasan terperinci tentang proses pelaksanaan komponen main balik audio dan video dalam dokumen Vue

WBOY
Lepaskan: 2023-06-20 20:58:38
asal
3494 orang telah melayarinya

Vue.js, sebagai rangka kerja JavaScript progresif untuk membina antara muka pengguna, mempunyai prestasi dan aplikasi yang sangat baik dalam semua aspek. Dokumentasi Vue.js juga menyediakan proses pelaksanaan komponen main balik audio dan video, menyediakan pembangun bahagian hadapan dengan kaedah operasi yang mudah. Seterusnya, kami akan mengetahui lebih lanjut tentang proses pelaksanaan komponen main balik audio dan video dalam dokumen Vue.js.

Pertama, kita perlu merujuk komponen dalam projek Vue:

<template>
  <div>
    <audio-player :src="audioSrc" :controls="controls" :autoplay="autoplay" :loop="loop"></audio-player>
    <video-player :src="videoSrc" :controls="controls" :autoplay="autoplay" :loop="loop"></video-player>
  </div>
</template>

<script>
  import AudioPlayer from './AudioPlayer.vue'
  import VideoPlayer from './VideoPlayer.vue'

  export default {
    components: {
      AudioPlayer,
      VideoPlayer
    },
    data () {
      return {
        audioSrc: 'audio.mp3',
        videoSrc: 'video.mp4',
        controls: true,
        autoplay: false,
        loop: false
      }
    }
  }
</script>
Salin selepas log masuk

Antaranya, AudioPlayer dan VideoPlayer boleh digandingkan, dan kedua-duanya memperkenalkan komponen bernama Player komponen dan menjadikannya sebagai komponen audio atau video. Kod komponen Player ini adalah seperti berikut:

<template>
  <div>
    <slot name="before"></slot>
    <slot name="after"></slot>
    <slot name="loading">
      <div class="loading"></div>
    </slot>
    <audio v-if="playerType === 'audio'" :src="src" class="player" :controls="controls" :autoplay="autoplay" :loop="loop" @loadedmetadata="loadedmetadata">
      Your browser does not support the audio tag.
    </audio>
    <video v-else-if="playerType === 'video'" :src="src" class="player" :controls="controls" :autoplay="autoplay" :loop="loop" @loadedmetadata="loadedmetadata">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

<script>
  export default {
    name: 'Player',
    props: {
      src: {
        type: String
      },
      controls: {
        type: Boolean,
        default: true
      },
      autoplay: {
        type: Boolean,
        default: false
      },
      loop: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        playerType: this.getType()
      }
    },
    methods: {
      getType () {
        if (/.mp3$/.test(this.src)) {
          return 'audio'
        } else if (/.mp4$/.test(this.src)) {
          return 'video'
        }
      },
      loadedmetadata () {
        this.$emit('duration', this.$refs.player.duration)
      }
    }
  }
</script>

<style scoped>
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading:after {
    content: 'Loading...';
  }
  .player {
    width: 100%;
  }
</style>
Salin selepas log masuk

Komponen Player ini menggunakan props untuk menerima parameter yang perlu diluluskan, termasuk src (laluan fail audio dan video), controls (sama ada hendak memaparkan bar kawalan), autoplay (sama ada hendak bermain secara automatik), loop (sama ada hendak menggelung atau tidak), dsb. Seterusnya, tentukan jenis fail melalui kaedah getType, dan kemudian tunjukkan komponen audio atau video mengikut jenis yang sepadan.

Dalam komponen Player, slot slot digunakan untuk memasukkan komponen anak. Contohnya, apabila anda perlu menambah beberapa teks atau butang sebelum atau selepas, gunakan slot before dan after. Selepas mengikat acara loadedmetadata, gunakan slot loading untuk memaparkan perkataan "Memuatkan..." untuk menunggu fail audio dan video dimuatkan.

Akhir sekali, tetapkan penampilan pemain dengan merujuk gaya CSS berikut:

.player {
  width: 400px;
  height: 300px;
  background-color: black;
  color: white;
}
Salin selepas log masuk

Di sini hanya warna latar belakang dan warna teks yang ditetapkan, sebenarnya, pemain juga boleh disesuaikan melalui CSS Tetapan terperinci.

Melalui proses pelaksanaan di atas, kami boleh menambah pemain audio dan video dengan mudah pada projek Vue dan melaksanakan pelbagai operasi main balik audio dan video biasa. Menggunakan komponen dan slot tersuai yang disediakan oleh Vue.js membolehkan kami menambah fungsi dengan cepat pada projek dan meningkatkan kecekapan pembangunan.

Atas ialah kandungan terperinci Penjelasan terperinci tentang proses pelaksanaan komponen main balik audio dan video dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan