vue实现录播播放
Vue 实现录播播放
使用 video.js 实现
安装 video.js 和相关的 Vue 适配器:
npm install video.js @videojs-player/vue
在 Vue 组件中引入并使用:
<template>
<video-player
src="你的视频地址.mp4"
controls
autoplay
:loop="false"
:volume="0.6"
/>
</template>
<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
export default defineComponent({
components: {
VideoPlayer
}
})
</script>
使用原生 HTML5 video 元素
简单的视频播放器实现:
<template>
<div>
<video
ref="videoPlayer"
controls
width="640"
height="360"
>
<source src="你的视频地址.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频
</video>
<div>
<button @click="play">播放</button>
<button @click="pause">暂停</button>
<button @click="stop">停止</button>
</div>
</div>
</template>
<script>
export default {
methods: {
play() {
this.$refs.videoPlayer.play()
},
pause() {
this.$refs.videoPlayer.pause()
},
stop() {
const video = this.$refs.videoPlayer
video.pause()
video.currentTime = 0
}
}
}
</script>
添加播放列表功能
实现多个视频的播放列表:
<template>
<div>
<video
ref="videoPlayer"
controls
width="640"
height="360"
></video>
<ul>
<li
v-for="(video, index) in videos"
:key="index"
@click="changeVideo(video.src)"
>
{{ video.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
videos: [
{ title: '视频1', src: 'video1.mp4' },
{ title: '视频2', src: 'video2.mp4' },
{ title: '视频3', src: 'video3.mp4' }
]
}
},
methods: {
changeVideo(src) {
this.$refs.videoPlayer.src = src
this.$refs.videoPlayer.load()
this.$refs.videoPlayer.play()
}
}
}
</script>
添加进度条控制
自定义视频进度控制:
<template>
<div>
<video
ref="videoPlayer"
@timeupdate="updateProgress"
controls
width="640"
height="360"
></video>
<input
type="range"
min="0"
max="100"
step="1"
v-model="progress"
@input="seek"
/>
<span>{{ currentTime }} / {{ duration }}</span>
</div>
</template>
<script>
export default {
data() {
return {
progress: 0,
currentTime: '00:00',
duration: '00:00'
}
},
methods: {
updateProgress() {
const video = this.$refs.videoPlayer
this.progress = (video.currentTime / video.duration) * 100
this.currentTime = this.formatTime(video.currentTime)
this.duration = this.formatTime(video.duration)
},
seek() {
const video = this.$refs.videoPlayer
video.currentTime = (this.progress / 100) * video.duration
},
formatTime(seconds) {
const minutes = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`
}
}
}
</script>
添加全屏功能
实现全屏播放功能:
<template>
<div>
<video
ref="videoPlayer"
controls
width="640"
height="360"
></video>
<button @click="toggleFullscreen">全屏</button>
</div>
</template>
<script>
export default {
methods: {
toggleFullscreen() {
const video = this.$refs.videoPlayer
if (!document.fullscreenElement) {
video.requestFullscreen()
} else {
document.exitFullscreen()
}
}
}
}
</script>
添加画中画功能
实现画中画模式:
<template>
<div>
<video
ref="videoPlayer"
controls
width="640"
height="360"
></video>
<button @click="togglePictureInPicture">画中画</button>
</div>
</template>
<script>
export default {
methods: {
async togglePictureInPicture() {
const video = this.$refs.videoPlayer
try {
if (video !== document.pictureInPictureElement) {
await video.requestPictureInPicture()
} else {
await document.exitPictureInPicture()
}
} catch (error) {
console.error('画中画错误:', error)
}
}
}
}
</script>
添加播放速度控制
实现播放速度调整:
<template>
<div>
<video
ref="videoPlayer"
controls
width="640"
height="360"
></video>
<select v-model="playbackRate" @change="changeSpeed">
<option value="0.5">0.5x</option>
<option value="1" selected>1x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
playbackRate: 1
}
},
methods: {
changeSpeed() {
this.$refs.videoPlayer.playbackRate = this.playbackRate
}
}
}
</script>
这些实现方式可以根据实际需求进行组合和扩展,构建功能更完善的录播播放器。







