vue视频播放器插件vue-video-player
.Videoindex{display:block;高度：350px；最大高度：350px；边距：10px自动；.video-js.vjs-tech{宽度：100%；高度：350px；最大高度：350px；}}.video-js.vjs-big-play-button{位置：绝对；显示：块；46%；左：43%；背景：rgba(0,0,0,.7);border:none;}.video-js.vjs-big-play-button.vjs-icon-placeholder:before{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；}.vjs-controls-disabled.vjs-big-play-button,.vjs-has-started.vjs-big-play-button,.vjs-using-native-controls.vjs-big-play-button,.vjs-error.vjs-big-play-button{display:none;}.vjs-paused.vjs-big-play-button{display:block;}第一次写文章主要是项目完成后的codereview。一、插件Github地址vue-video-player插件目标效果点击右侧图片，左侧视频源会相应变化第一步：npmnpminstallvue-video-player--saveMain。jsimportVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)第二步组件Mounted首先是html部分（右边添加点击事件）
然后是数据部分playerOptions:{techOrder:['flash','html5'],preload:'auto',sourceOrder:true,sources:[],规格tRatio:'16:9',height:350,autoplay:false,controls:true,language:'zh-CN',fluid:true,notSupportedMessage:'此视频暂时无法播放，请稍后再试'}计算和事件部分计算：{player(){returnthis.$refs.myPlayer.player}}，方法：{ajaxData(){...this.$set(this.playerOptions.sources,0,{type:"video/mp4",src:url,})},activated(index){this.activePosition=indexthis.$set(this.playerOptions.sources,0,{类型:"video/mp4",src:this.topList[index].url,})this.player.muted(false)},}需要注意的是在获取数据的时候使用$set方法给原始数据一个视频源，否则插件会有无法播放的错误；最后是样式部分。视频原画风不是很美。修改样式时注意不要添加scoped
.Videoindex{display:block;高度：350px；最大高度：350px；边距：10px自动；.video-js.vjs-tech{宽度：100%；高度：350px；最大高度：350px；}}.video-js.vjs-big-play-button{位置：绝对；显示：块；46%；左：43%；背景：rgba(0,0,0,.7);border:none;}.video-js.vjs-big-play-button.vjs-icon-placeholder:before{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；}.vjs-controls-disabled.vjs-big-play-button,.vjs-has-started.vjs-big-play-button,.vjs-using-native-controls.vjs-big-play-button,.vjs-error.vjs-big-play-button{display:none;}.vjs-paused.vjs-big-play-button{display:block;}待完善
