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 a=require("vue"),B=["src","poster","autoplay","controls","loop","muted","preload"],C=a.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(p,{expose:f,emit:c}){const l=p,o=a.ref(),i=a.ref(),n=a.ref(!1),u=a.ref(!0),s=a.ref(!1),r=c,m=a.computed(()=>typeof l.width=="number"?`${l.width}px`:l.width),y=a.computed(()=>typeof l.height=="number"?`${l.height}px`:l.height);a.watch(()=>l.second,()=>{v()}),a.watch(()=>l.autoplay,e=>{var t;e?(s.value=!1,u.value=!1,n.value=!0):(s.value=!0,u.value=!0,n.value=!1,(t=o.value)==null||t.pause())},{immediate:!0,flush:"post"});function v(){if(o.value){o.value.currentTime=l.second;const e=document.createElement("canvas"),t=e.getContext("2d");e.width=o.value.videoWidth,e.height=o.value.videoHeight,t==null||t.drawImage(o.value,0,0,e.width,e.height),i.value=e.toDataURL("image/png")}}function h(){u.value&&(u.value=!1,o.value.currentTime=0),n.value?o.value.pause():o.value.play()}function g(){n.value=!1,l.playIcon&&(s.value=!0),r("pause")}function w(){n.value=!0,l.playIcon&&(s.value=!1),r("play")}function P(){u.value&&(u.value=!1,o.value.currentTime=0),n.value||o.value.play()}function $(){n.value&&o.value.pause()}return f({play:P,pause:$}),(e,t)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(["m-video",{"video-hover":s.value}]),style:a.normalizeStyle(`--video-width: ${m.value}; --video-height: ${y.value}; --video-icon-scale: ${e.iconSize/80};`)},[a.createElementVNode("video",a.mergeProps({ref_key:"veoRef",ref:o,class:"video-element",style:`object-fit: ${e.fit};`,src:e.src,poster:e.poster?e.poster:i.value,autoplay:e.autoplay,controls:!u.value&&e.controls,loop:e.loop,muted:e.autoplay||e.muted,preload:e.preload,crossorigin:"anonymous",onLoadedmetadata:t[0]||(t[0]=d=>e.poster?()=>!1:v()),onPause:t[1]||(t[1]=d=>g()),onPlay:t[2]||(t[2]=d=>w()),onClick:a.withModifiers(h,["prevent"])},e.$attrs)," 您的浏览器不支持video标签。 ",16,B),a.withDirectives(a.createElementVNode("span",{class:a.normalizeClass(["icon-play",{"icon-show":s.value}])},t[3]||(t[3]=[a.createElementVNode("svg",{class:"play-svg",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 34 34"},[a.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\r
          C31.913,19.675,31.913,14.325,28.26,11.961z`})],-1)]),2),[[a.vShow,u.value||e.playIcon]])],6))}});exports.default=C;