vue-amazing-ui/lib/video/Video.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),B=["src","poster","autoplay","controls","loop","muted","preload"],C=e.defineComponent({__name:"Video",props:{width:{default:800},height:{default:450},src:{default:void 0},poster:{default:void 0},second:{default:.5},fit:{default:"contain"},autoplay:{type:Boolean,default:!1},controls:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},preload:{default:"metadata"},playIcon:{type:Boolean,default:!0},iconSize:{default:80}},emits:["play","pause"],setup(t,{expose:c,emit:p}){const l=t,a=e.ref(),r=e.ref(),i=e.ref(!1),n=e.ref(!0),s=e.ref(!1),v=p,m=e.computed(()=>typeof l.width=="number"?`${l.width}px`:l.width),y=e.computed(()=>typeof l.height=="number"?`${l.height}px`:l.height);e.watch(()=>l.second,()=>{d()}),e.watch(()=>l.autoplay,o=>{o?(s.value=!1,n.value=!1,i.value=!0):(s.value=!0,n.value=!0,i.value=!1,a.value?.pause())},{immediate:!0,flush:"post"});function d(){if(a.value){a.value.currentTime=l.second;const o=document.createElement("canvas"),u=o.getContext("2d");o.width=a.value.videoWidth,o.height=a.value.videoHeight,u?.drawImage(a.value,0,0,o.width,o.height),r.value=o.toDataURL("image/png")}}function h(){n.value&&(n.value=!1,a.value.currentTime=0),i.value?a.value.pause():a.value.play()}function g(){i.value=!1,l.playIcon&&(s.value=!0),v("pause")}function w(){i.value=!0,l.playIcon&&(s.value=!1),v("play")}function P(){n.value&&(n.value=!1,a.value.currentTime=0),i.value||a.value.play()}function $(){i.value&&a.value.pause()}return c({play:P,pause:$}),(o,u)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["video-wrap",{"video-hover":s.value}]),style:e.normalizeStyle(`--video-width: ${m.value}; --video-height: ${y.value}; --video-icon-scale: ${t.iconSize/80};`)},[e.createElementVNode("video",e.mergeProps({ref_key:"veoRef",ref:a,class:"video-element",style:`object-fit: ${t.fit};`,src:t.src,poster:t.poster?t.poster:r.value,autoplay:t.autoplay,controls:!n.value&&t.controls,loop:t.loop,muted:t.autoplay||t.muted,preload:t.preload,crossorigin:"anonymous",onLoadedmetadata:u[0]||(u[0]=f=>t.poster?()=>!1:d()),onPause:u[1]||(u[1]=f=>g()),onPlay:u[2]||(u[2]=f=>w()),onClick:e.withModifiers(h,["prevent"])},o.$attrs)," 您的浏览器不支持video标签。 ",16,B),e.withDirectives(e.createElementVNode("span",{class:e.normalizeClass(["icon-play",{"icon-show":s.value}])},[...u[3]||(u[3]=[e.createElementVNode("svg",{class:"play-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 34 34"},[e.createElementVNode("path",{d:`M28.26,11.961L11.035,0.813C7.464-1.498,3,1.391,3,6.013v21.974c0,4.622,4.464,7.511,8.035,5.2L28.26,22.039
          C31.913,19.675,31.913,14.325,28.26,11.961z`})],-1)])],2),[[e.vShow,n.value||t.playIcon]])],6))}});exports.default=C;