播放/暂停按钮特效：
看视频不用操心，我们这儿快捷切屏按钮就妥了！这个操作超简单的，首先就是先在Vue里搞一个叫做”playing”的变量，用来判断视频是不是在放着;然后，在HTML模板里面晃悠一圈儿，把v-bind 附加上播放按钮上，这样就能随 playing 变量的变化而改变。搞定样式以后，还得在Vue里面编写一个”togglePlay()” function，然后跟v-on 绑定起来，轻轻一点就可以实现视频的快速切换呢～
播放暂停按钮变帅了！加上淡出淡入或者画面放大缩小的动态特效，绝对更流畅好看。靠 Vue 的过渡类名和 CSS，跟着我学，让你的界面生动有趣！
进度条特效：
data: {
playing: false
}
进度条好酷，能告诉你看了多少（currentTime），再过多久才能看完（duration）！怎么样才能让进度条跟上视频节奏？超级简单，算一下currentTime和duration分别是多少，然后放到进度条上就行！
为了让你用得顺手些，让咱们加个滑杆！这样子就能随意调整进度这个时候就要用到vue里面处理事件的东西，只要鼠标上下拖动或者按下时，就让currentTime的数值跟着变化，保证和视频播放器同步。
methods: {
togglePlay() {
this.playing = !this.playing;
}
}
音量控制特效：
调音量很重要！首先定义个变量叫volume给Vue实例用，然后在HTML模板上加上v-bind指令，这样音量按钮的class就会根据volume值来换样子，比如静音、低调、高亮等等。
整天调音是不是有点无聊？咱们来加点新意！运用Vue这神器做个直观的界面，再跟volume无缝衔接即可。简单来说就是这样搞~
data: {
currentTime: 0,
duration: 0
}
全屏特效：
全屏太赞了！咱们就在Vue实例里加个fullscreen变量。再把变量值传给全屏按钮的class属性。想用全屏？直接点下全屏按钮就行，不需要手操，toggleFullscreen()函数能自动处理呢～
methods: {
updateCurrentTime() {
this.currentTime = videoElement.currentTime;
}
}
想让全屏切换变得炫酷？来加点过渡效果呗！Vue上就有自带的过渡模块可以用，或者挑个动画库耍下动画也是不错滴选择。你看画面大小和物件位置变幻多姿，配上那种顺畅酷炫的动画效果，保证让你乐翻天！
总结与展望：
我告诉你们，为啥要选Vue.js这种东西来打造一款超级棒的视频播放器？就是因为他牛逼用了它，你想怎么改就怎么改，比如操作进度，调整音量，还有就是全屏看片子，样样不在话下！
data: {
volume: 0.5
}
下次搞新项目时，咱们加点料呗，比如搞点儿快捷键或换换语言呗。时间上还得多抓紧，至少要让各种浏览器都能用，这样哪都看得舒心！
看完这篇文章，你肯定能轻松学会怎么做Vue视频播放器。别犹豫，赶快动手试一试！还有啥不懂的或者有趣的想法？下面留言告诉我！
。
评论0