Home > Article > Web Front-end > Detailed explanation of the implementation process of audio and video playback components in Vue documents
Vue.js, as a progressive JavaScript framework for building user interfaces, has excellent performance and applications in all aspects. The Vue.js documentation also provides the implementation process of audio and video playback components, providing front-end developers with convenient operation methods. Next, we will learn more about the implementation process of the audio and video playback component in the Vue.js document.
First, we need to reference the component in the Vue project:
<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>
Among them, AudioPlayer
and VideoPlayer
can be coupled, and they are both introduced Create a component named Player
and render it as a audio
or video
component. The code of this Player
component is as follows:
<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>
This Player
component uses props
to receive the parameters that need to be passed, including src
(audio and video file path), controls
(whether to display the control bar), autoplay
(whether to play automatically), loop
(whether to loop playback), etc. . Then, determine the file type through the getType
method, and then render the audio
or video
component according to the corresponding type.
In the Player
component, the slot
slot is used to insert child components. For example, when you need to add some text or buttons before or after, use the before
and after
slots. After binding the loadedmetadata
event, use the loading
slot to display the words "Loading..." to wait for the audio and video files to be loaded.
Finally, set the appearance of the player by citing the following CSS style:
.player { width: 400px; height: 300px; background-color: black; color: white; }
Only the background color and text color are set here. In fact, the player can also be modified through CSS. Detailed settings.
Through the above implementation process, we can easily add audio and video players to the Vue project and implement various common audio and video playback operations. Using the custom components and slots provided by Vue.js allows us to quickly add functions to the project and improve development efficiency.
The above is the detailed content of Detailed explanation of the implementation process of audio and video playback components in Vue documents. For more information, please follow other related articles on the PHP Chinese website!