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>
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>
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; }
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!