一、可自定义样式
Vue视频播放器可以根据需求自定义样式，如修改播放器的背景色、字体颜色、大小等。以下是示例代码：
<template>
<div class="my-player">
<video ref="videoPlayer"
:src="videoSrc"
:autoplay="autoplay"
:controls="controls"
:poster="poster"
:width="width"
:height="height"></video>
</div>
</template>
<style>
.my-player {
background-color: #000;
color: #fff;
font-size: 18px;
}
</style>
上面的代码中，我们使用了一个自定义的样式类my-player，来控制播放器的背景色、字体颜色和大小。
二、支持多种格式的视频
Vue视频播放器支持常见的各种视频格式，如MP4、AVI、FLV等。以下是示例代码：
<template>
<div class="my-player">
<video ref="videoPlayer"
:src="videoSrc"
:autoplay="autoplay"
:controls="controls"
:poster="poster"
:width="width"
:height="height"></video>
</div>
</template>
<script>
export default {
data () {
return {
videoSrc: 'example.mp4',
autoplay: false,
controls: true,
poster: 'poster.png',
width: 640,
height: 360
}
}
}
</script>
上面的代码中，我们设置了一个MP4格式的视频，同时也设置了视频的自动播放、控制栏、封面、宽度和高度。
三、支持视频播放进度条
Vue视频播放器支持视频播放进度条，可以通过拖动进度条控制视频的播放进度。以下是示例代码：
<template>
<div class="my-player">
<progress ref="progressBar"
:value="currentTime"
:max="duration"
@click="jumpPlay">
</progress>
<video ref="videoPlayer"
:src="videoSrc"
:autoplay="autoplay"
:controls="controls"
:poster="poster"
:width="width"
:height="height"
@timeupdate="timeUpdate"></video>
</div>
</template>
<script>
export default {
data () {
return {
videoSrc: 'example.mp4',
autoplay: false,
controls: true,
poster: 'poster.png',
width: 640,
height: 360,
currentTime: 0,
duration: 0
}
},
methods: {
timeUpdate () {
const videoPlayer = this.$refs.videoPlayer;
this.currentTime = videoPlayer.currentTime;
this.duration = videoPlayer.duration;
},
jumpPlay (event) {
const progressBar = this.$refs.progressBar;
const videoPlayer = this.$refs.videoPlayer;
const rect = progressBar.getBoundingClientRect();
const rate = (event.clientX - rect.left) / rect.width;
videoPlayer.currentTime = videoPlayer.duration * rate;
}
}
}
</script>
上面的代码中，我们使用了视频播放器自带的progress组件来实现了一个视频播放进度条。同时，我们还给进度条添加了鼠标点击事件，可以通过拖动进度条控制视频的播放进度。
四、支持全屏播放
Vue视频播放器支持全屏播放模式，可以让用户在感受视频乐趣的同时，还能够全屏欣赏视频。以下是示例代码：
<template>
<div class="my-player">
<video ref="videoPlayer"
:src="videoSrc"
:autoplay="autoplay"
:controls="controls"
:poster="poster"
:width="width"
:height="height"></video>
<button @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏播放' }}</button>
</div>
</template>
<script>
export default {
data () {
return {
videoSrc: 'example.mp4',
autoplay: false,
controls: true,
poster: 'poster.png',
width: 640,
height: 360,
isFullScreen: false
}
},
methods: {
toggleFullScreen () {
const videoPlayer = this.$refs.videoPlayer;
const el = videoPlayer.parentNode;
if (!this.isFullScreen) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
this.isFullScreen = !this.isFullScreen;
}
}
}
</script>
上面的代码中，我们使用了video播放器自带的fullscreen API来实现了全屏播放模式，同时，我们还添加了一个切换全屏播放和退出全屏的按钮，让用户直观地感受全屏播放的效果。
五、支持视频倍速播放
Vue视频播放器支持视频倍速播放，可以根据需求将视频播放速度加快或减慢。以下是示例代码：
<template>
<div class="my-player">
<video ref="videoPlayer"
:src="videoSrc"
:autoplay="autoplay"
:controls="controls"
:poster="poster"
:width="width"
:height="height"
:playbackRate="playbackRate"></video>
<select v-model="playbackRate">
<option value="1.0">正常速度</option>
<option value="0.5">0.5倍速度</option>
<option value="1.5">1.5倍速度</option>
<option value="2.0">2倍速度</option>
</select>
</div>
</template>
<script>
export default {
data () {
return {
videoSrc: 'example.mp4',
autoplay: false,
controls: true,
poster: 'poster.png',
width: 640,
height: 360,
playbackRate: 1.0
}
}
}
</script>
上面的代码中，我们添加了一个select组件，用于选择视频的倍速播放。可以看到，我们可以根据需求将视频的播放速度加快或减慢。
六、总结
以上就是Vue视频播放器的一些常见功能的实现代码，包括自定义样式、支持多种格式的视频、支持视频播放进度条、支持全屏播放和支持视频倍速播放。我们可以根据业务需求，自由组合和扩展这些功能，为用户提供更好的视频播放体验。
