vue-responsive-video-background-player/dist/vue-responsive-video-background-player.umd.js

Play your own videos in background responsively

(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode(".video-wrapper[data-v-c3f4996a]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;overflow:hidden;z-index:0}.fade[data-v-c3f4996a]{backface-visibility:hidden}.fade-enter-active[data-v-c3f4996a],.fade-leave-active[data-v-c3f4996a]{transition:opacity 1s}.fade-enter[data-v-c3f4996a],.fade-leave-to[data-v-c3f4996a]{opacity:0}video[data-v-c3f4996a]{visibility:visible;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:100%}.video-buffering[data-v-692e9d3d]{width:100%;overflow:hidden;height:100%;top:0;left:0;position:absolute}.video-overlay[data-v-95abe06c]{height:100%;width:100%;top:0;left:0;position:absolute}.vue-responsive-videobg[data-v-30aa7649]{background:none;position:relative;width:100%;overflow:hidden}.vue-responsive-videobg .videobg-content[data-v-30aa7649]{position:absolute;top:0;left:0;width:100%;height:100%}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.VueResponsiveVideoBackgroundPlayer={},i.Vue))})(this,function(i,t){"use strict";const p={src:{type:String,required:!0},muted:{type:Boolean,default:!0},loop:{type:Boolean,default:!0},preload:{type:String,default:"auto"},objectFit:{type:String,default:"cover"},posterBgSize:{type:String,default:"cover"},objectPosition:{type:String,default:"center"},playsWhen:{type:String,default:"canplay",note:"Google HTML Video Events"},playbackRate:{type:Number,default:1},transition:{type:String,default:"fade"}},f=["src","res","autoplay"],m=e=>Array.isArray(e)?e.length===0?!0:c(e,f):!1,c=(e,o)=>o.length===1?u(e,o[0]):u(e,o[0])*c(e,o.slice(1)),u=(e,o)=>{for(let n=e.length-1;n>-1;n-=1){const r=e[n];if(!g(r))return!1;if(_(r,o))return!0}return!1},g=e=>e!=null&&e.constructor.name==="Object",_=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),v={sources:{type:Array,default(){return[]},validator:m},autoplay:{type:Boolean,default:!0},poster:{type:String,default:""},overlay:{type:String,default:""},...p},L="",a=(e,o)=>{const n=e.__vccOpts||e;for(const[r,d]of o)n[r]=d;return n},b={props:p,emits:["playing","paused","error","loading","ended","ready"],data(){return{showVideo:!1}},computed:{styleObject(){return!this.objectFit&&!this.objectPosition?{}:{objectFit:this.objectFit,objectPosition:this.objectPosition}}},watch:{src(){this.load()}},methods:{pause(){this.$refs.video&&(this.$refs.video.pause(),this.$emit("paused"))},load(){this.hide(),setTimeout(()=>{this.$refs.video.load(),this.$emit("loading")},1e3)},play(){this.setPlaybackRate(),this.$refs.video.play(),this.show(),this.$emit("playing")},show(){this.showVideo=!0},hide(){this.showVideo=!1},getMediaType(e){return`video/${e.split(".").pop().split(/[?#]/)[0]}`},videoCanPlay(){return!!this.$refs.video.canPlayType},videoReady(){this.pause(),this.$emit("ready")},videoError(){this.$emit("error")},videoEnded(){this.$emit("ended")},setPlaybackRate(){this.$refs.video.playbackRate=this.playbackRate,this.$refs.video.defaultPlaybackRate=this.playbackRate}},mounted(){this.videoCanPlay()&&(this.$refs.video[`on${this.playsWhen}`]=this.videoReady,this.$refs.video.onerror=this.videoError,this.$refs.video.onended=this.videoEnded)}},$={class:"video-wrapper"},k=["muted","loop","preload"],w=["src","type"];function P(e,o,n,r,d,s){return t.openBlock(),t.createBlock(t.Transition,{name:e.transition},{default:t.withCtx(()=>[t.withDirectives(t.createElementVNode("div",$,[t.createElementVNode("video",{ref:"video",autoplay:"",playsinline:"",muted:e.muted,loop:e.loop,preload:e.preload,style:t.normalizeStyle(s.styleObject)},[t.createElementVNode("source",{src:e.src,type:s.getMediaType(e.src)},null,8,w)],12,k)],512),[[t.vShow,d.showVideo]])]),_:1},8,["name"])}const V=a(b,[["render",P],["__scopeId","data-v-c3f4996a"]]),A="",S={props:{poster:{type:String,required:!0},backgroundSize:{type:String,default:"cover"},backgroundPosition:{type:String,default:"center"}},computed:{image(){return{backgroundImage:`url(${this.poster})`,backgroundSize:this.backgroundSize,backgroundPosition:this.backgroundPosition}}}};function j(e,o,n,r,d,s){return t.openBlock(),t.createElementBlock("div",{class:"video-buffering",style:t.normalizeStyle(s.image)},null,4)}const B=a(S,[["render",j],["__scopeId","data-v-692e9d3d"]]),H="",E={props:{overlay:{type:String,required:!0}}};function z(e,o,n,r,d,s){return t.openBlock(),t.createElementBlock("div",{class:"video-overlay",style:t.normalizeStyle({background:n.overlay})},null,4)}const R=a(E,[["render",z],["__scopeId","data-v-95abe06c"]]),y=(e,o)=>{let n="null";return(...r)=>{n==="null"&&(n=setTimeout(()=>{e(...r),n="null"},o))}},W={data(){return{width:0}},computed:{current(){if(this.sources.length===0)return this.default;const e=this.sources.sort((o,n)=>o.res-n.res).filter(o=>o.res>=this.width);return e.length===0?this.default:e[0]},default(){return{src:this.src,poster:this.poster,autoplay:this.autoplay}}},methods:{_change_video_resolution(){this.width=this.$_innerWidth()},$_innerWidth(){return window.innerWidth&&document.documentElement.clientWidth?Math.min(window.innerWidth,document.documentElement.clientWidth):window.innerWidth||document.documentElement.clientWidth||document.getElementsByTagName("body")[0].clientWidth}},beforeMount(){this._change_video_resolution()},mounted(){window.addEventListener("resize",y(this._change_video_resolution,250))},beforeUnmount(){window.removeEventListener("resize",y(this._change_video_resolution,250))}},D="",O={props:v,mixins:[W],emits:["playing","paused","error","loading","ended","ready"],components:{VideoPlayer:V,VideoPoster:B,VideoOverlay:R},computed:{player(){return this.$refs.player}},methods:{playVideo(){this.$emit("ready"),this.current.autoplay&&this.player.play()}}},T={class:"vue-responsive-videobg",ref:"vidbg"},C={class:"videobg-content"};function M(e,o,n,r,d,s){const F=t.resolveComponent("video-poster"),I=t.resolveComponent("video-player"),q=t.resolveComponent("video-overlay");return t.openBlock(),t.createElementBlock("section",T,[e.current.poster||e.poster?(t.openBlock(),t.createBlock(F,{key:0,poster:e.current.poster||e.poster,"background-size":e.posterBgSize,"background-position":e.objectPosition},null,8,["poster","background-size","background-position"])):t.createCommentVNode("",!0),t.createVNode(I,{ref:"player",src:e.current.src,muted:e.muted,loop:e.loop,preload:e.preload,"plays-when":e.playsWhen,"playback-rate":e.playbackRate,transition:e.transition,"object-fit":e.objectFit,"object-position":e.objectPosition,onReady:s.playVideo,onPlaying:o[0]||(o[0]=l=>e.$emit("playing")),onPaused:o[1]||(o[1]=l=>e.$emit("paused")),onError:o[2]||(o[2]=l=>e.$emit("error")),onLoading:o[3]||(o[3]=l=>e.$emit("loading")),onEnded:o[4]||(o[4]=l=>e.$emit("ended"))},null,8,["src","muted","loop","preload","plays-when","playback-rate","transition","object-fit","object-position","onReady"]),e.overlay?(t.openBlock(),t.createBlock(q,{key:1,overlay:e.overlay},null,8,["overlay"])):t.createCommentVNode("",!0),t.createElementVNode("div",C,[t.renderSlot(e.$slots,"default",{},void 0,!0)])],512)}const h=a(O,[["render",M],["__scopeId","data-v-30aa7649"]]),N={install(e){e.component("VideoBackground",h)}};i.Plugin=N,i.default=h,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});