How to play audio and video in Vue?
In Vue, we can use HTML5 <audio>and <video>tags to implement audio and video playback. Vue itself does not provide specialized audio or video playback components, but you can use Vue's data binding and life cycle hooks to control audio and video playback.
Audio Player
In Vue, we can use <audio>tags to embed audio files. Here is a simple example:
<template>
<div>
<audio ref="audio" :src="audioUrl"></audio>
<button @click="playAudio">播放</button>
<button @click="pauseAudio">暂停</button>
</div>
</template>
<script>
export default {
data() {
return {
audioUrl: 'http://example.com/audio.mp3',
}
},
methods: {
playAudio() {
this.$refs.audio.play()
},
pauseAudio() {
this.$refs.audio.pause()
},
},
}
</script>
In this example, we use <audio>tags to embed an audio file. refThe attribute is , we can get the element audioby passing it in the method . The property is the URL of the audio file.this.$refs.audiosrc
In methods, we define two methods playAudioand pauseAudio, which are used to play and pause audio respectively. In playAudiothe method, we use this.$refs.audio.play()to play the audio. In pauseAudiothe method, we use this.$refs.audio.pause()to pause the audio.
video playback
In Vue, we can use <video>tags to embed video files. Here is a simple example:
<template>
<div>
<video ref="video" :src="videoUrl"></video>
<button @click="playVideo">播放</button>
<button @click="pauseVideo">暂停</button>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: 'http://example.com/video.mp4',
}
},
methods: {
playVideo() {
this.$refs.video.play()
},
pauseVideo() {
this.$refs.video.pause()
},
},
}
</script>
In this example, we use <video>tags to embed a video file. refThe attribute is , we can get the element videoby passing it in the method . The attribute is the URL of the video file.this.$refs.videosrc
In methods, we define two methods playVideoand pauseVideo, respectively for playing and pausing the video. In playVideothe method, we use this.$refs.video.play()to play the video. In pauseVideothe method, we this.$refs.video.pause()pause the video using
Custom player
If you want to customize the appearance and behavior of your audio or video player, you can do so using Vue's data binding and lifecycle hooks. Here is an example of a custom audio player:
<template>
<div :class="{
'playing': playing}" @click="togglePlaying">
<div class="play-button"></div>
<audio ref="audio" :src="audioUrl" @play="onPlay" @pause="onPause"></audio>
<div class="progress-bar" :style="{width: progress + '%'}"></div>
</div>
</template>
<script>
export default {
data() {
return {
audioUrl: 'http://example.com/audio.mp3',
playing: false,
progress: 0,
}
},
methods: {
togglePlaying() {
if (this.playing) {
this.$refs.audio.pause()
} else {
this.$refs.audio.play()
}
},
onPlay() {
this.playing = true
this.updateProgress()
},
onPause() {
this.playing = false
},
updateProgress() {
const duration = this.$refs.audio.duration
const currentTime = this.$refs.audio.currentTime
if (duration && currentTime) {
this.progress = currentTime / duration * 100
}
if (this.playing) {
requestAnimationFrame(this.updateProgress)
}
},
},
mounted() {
this.$refs.audio.addEventListener('timeupdate', this.updateProgress)
},
beforeDestroy() {
this.$refs.audio.removeEventListener('timeupdate', this.updateProgress)
},
}
</script>
<style>
.playing .play-button {
display: none;
}
.play-button {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
}
.progress-bar {
height: 5px;
background-color: #ccc;
}
</style>
In this example, we have customized an audio player. In data, we define the URL of the audio file, the playback state, and the playback progress. In methods, we define togglePlaying, onPlay, onPauseand updateProgressfour methods.
In the template, we have used <div>elements to contain various parts of the player. classShow and hide the play button by binding properties, and styleset the width of the progress bar by binding properties. In <audio>the tag, we use @playand @pauseevents to listen for play and pause events so that the play status and progress bar can be updated when the status changes.
In mountedthe lifecycle hook, we use addEventListenermethods to listen for timeupdateevents to update the progress bar when the playback progress changes. In beforeDestroylifecycle hooks, we use removeEventListenermethods to remove event listeners to avoid memory leaks.
Summarize
In Vue, we can use HTML5 <audio>and <video>tags to implement audio and video playback. Through Vue's data binding and life cycle hooks, we can customize the appearance and behavior of the audio or video player. The above is a simple example that you can extend and optimize according to your needs.