vue-video-wrapper/dist/bundle.esm.js

A Vue.js component to wrap embed iframes from Vimeo and Youtube.

import e from"@vimeo/player";import t from"object-assign";import i from"youtube-player";var r=["play","pause","ended","timeupdate","progress","seeked","texttrackchange","cuechange","cuepoint","volumechange","error","loaded"],o={videoId:{type:[String,Number],required:!0},playerHeight:{type:[String,Number],default:320},playerWidth:{type:[String,Number],default:640},options:{type:Object,default:function(){return{}}},videoUrl:{type:String,default:void 0},loop:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},controls:{type:Boolean,default:!0}},n=0,a={videoId:{type:[String,Number],required:!0},playerVars:{type:Object,default:function(){return{}}},height:{type:[Number,String],default:360},width:{type:[Number,String],default:640},resize:{type:Boolean,default:!1},resizeDelay:{type:Number,default:100},nocookie:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!1}},s=0,l=[{name:"YOUTUBE",component:{name:"YoutubePlayer",props:a,data:function(){var e;return s+=1,{player:{},events:(e={},e[-1]="unstarted",e[1]="play",e[2]="pause",e[0]="ended",e[3]="buffering",e[5]="cued",e),resizeTimeout:null,htmlId:"embed-youtube-video-"+s}},computed:{aspectRatio:function(){return this.width/this.height}},methods:{playerReady:function(e){this.$emit("ready",e.target)},playerStateChange:function(e){null!==e.data&&-1!==e.data&&this.$emit(this.events[e.data],e.target)},playerError:function(e){this.$emit("error",e.target)},updatePlayer:function(e){e?1!==this.playerVars.autoplay?this.player.cueVideoById({videoId:e}):this.player.loadVideoById({videoId:e}):this.player.stopVideo()},resizeProportionally:function(){var e=this;this.player.getIframe().then((function(t){var i=e.fitParent?t.parentElement.offsetWidth:t.offsetWidth,r=i/e.aspectRatio;e.player.setSize(i,r)}))},onResize:function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.resizeProportionally,this.resizeDelay)}},watch:{videoId:"updatePlayer",resize:function(e){e?(window.addEventListener("resize",this.onResize),this.resizeProportionally()):(window.removeEventListener("resize",this.onResize),this.player.setSize(this.width,this.height))},width:function(e){this.player.setSize(e,this.height)},height:function(e){this.player.setSize(this.width,e)}},beforeDestroy:function(){null!==this.player&&this.player.destroy&&(this.player.destroy(),delete this.player),this.resize&&window.removeEventListener("resize",this.onResize)},mounted:function(){window.YTConfig={host:"https://www.youtube.com/iframe_api"};var e=this.nocookie?"https://www.youtube-nocookie.com":"https://www.youtube.com";this.player=new i(this.$el,{host:e,width:this.width,height:this.height,videoId:this.videoId,playerVars:this.playerVars}),this.player.on("ready",this.playerReady),this.player.on("stateChange",this.playerStateChange),this.player.on("error",this.playerError),this.resize&&window.addEventListener("resize",this.onResize),this.fitParent&&this.resizeProportionally()},render:function(e){return e("div",{attrs:{id:this.htmlId}})}}},{name:"VIMEO",component:{name:"VimeoPlayer",props:o,methods:{update:function(e){return this.player.loadVideo(e)},play:function(){return this.player.play()},pause:function(){return this.player.pause()},mute:function(){return this.player.setVolume(0)},unmute:function(e){return void 0===e&&(e=.5),this.player.setVolume(e)},emitVueEvent:function(e){var t=this;this.player.on(e,(function(i){t.$emit(e,i,t.player)}))},setEvents:function(){var e=this;this.player.ready().then((function(){this.$emit("ready",this.player)})).catch((function(t){e.$emit("error",t,e.player)})),r.forEach((function(t){return e.emitVueEvent.call(e,t)}))}},data:function(){return{htmlId:"embed-vimeo-video-"+(n+=1),player:null}},render:function(e){return e("div",{attrs:{id:this.htmlId}})},mounted:function(){var i={id:this.videoId,width:this.playerWidth,height:this.playerHeight,loop:this.loop,autoplay:this.autoplay,controls:this.controls};this.videoUrl&&(i.url=this.videoUrl),this.player=new e(this.htmlId,t(i,this.options)),this.setEvents()},watch:{videoId:"update"},beforeDestroy:function(){this.player.unload()}}}],u={functional:!0,props:Object.assign({},{player:{type:String,required:!0,validator:function(e){return-1!==l.map((function(e){return e.name})).indexOf(e.toUpperCase())}},videoId:{type:[String,Number],required:!0}},o,a),render:function(e,t){var i=t.data,r=t.props,o=t.listeners,n=l.find((function(e){return e.name==r.player.toUpperCase()}));if(n)return e(n.component,{props:r,ref:i.ref,on:o})}};function d(e,t){if(void 0===t&&(t={}),!d.installed){d.installed=!0;var i=t.componentId;void 0===i&&(i="video-wrapper"),e.component(i,u)}}var p={install:d},h=null;"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.vue),h&&h.use(p),u.install=d;export default u;