vue实现无缝播放视频
实现无缝播放视频的方法
在Vue中实现无缝播放视频，可以通过监听视频结束事件并自动切换到下一个视频。以下是一种常见的实现方式：
<template>
<div>
<video
ref="videoPlayer"
:src="currentVideoSrc"
autoplay
@ended="playNextVideo"
></video>
</div>
</template>
<script>
export default {
data() {
return {
videoList: [
'video1.mp4',
'video2.mp4',
'video3.mp4'
],
currentIndex: 0
}
},
computed: {
currentVideoSrc() {
return this.videoList[this.currentIndex]
}
},
methods: {
playNextVideo() {
this.currentIndex = (this.currentIndex + 1) % this.videoList.length
this.$refs.videoPlayer.load()
this.$refs.videoPlayer.play()
}
}
}
</script>使用Intersection Observer优化性能
当视频不在视口中时暂停播放，进入视口时继续播放，可以优化性能：
mounted() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.$refs.videoPlayer.play()
} else {
this.$refs.videoPlayer.pause()
}
})
}, { threshold: 0.5 })
observer.observe(this.$refs.videoPlayer)
},
beforeDestroy() {
if (this.observer) {
this.observer.disconnect()
}
}预加载下一段视频
为了确保切换时的流畅性，可以预加载下一段视频：
methods: {
preloadNextVideo() {
const nextIndex = (this.currentIndex + 1) % this.videoList.length
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'video'
link.href = this.videoList[nextIndex]
document.head.appendChild(link)
}
},
mounted() {
this.preloadNextVideo()
}使用Video.js增强功能
如果需要更强大的视频播放功能，可以集成Video.js：
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
mounted() {
this.player = videojs(this.$refs.videoPlayer, {
autoplay: true,
controls: true
})
this.player.on('ended', this.playNextVideo)
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}处理移动端自动播放限制
移动端浏览器通常限制自动播放，需要用户交互触发：
methods: {
initVideo() {
const promise = this.$refs.videoPlayer.play()
promise.catch(error => {
// 显示播放按钮让用户点击
this.showPlayButton = true
})
},
handleUserInteraction() {
this.$refs.videoPlayer.play()
this.showPlayButton = false
}
}这些方法可以根据具体需求组合使用，实现流畅的无缝视频播放体验。
