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