pttx-plugin/lib/index.umd.js

评论插件

(function(e,N){typeof exports=="object"&&typeof module<"u"?module.exports=N(require("vue")):typeof define=="function"&&define.amd?define(["vue"],N):(e=typeof globalThis<"u"?globalThis:e||self,e.vueVideoXg=N(e.Vue))})(this,function(e){"use strict";const N="",_e="";let p={src:"https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4",poster:"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEcdM.img",volume:20,themeColor:"#19accc",activeColor:"red",width:"500px",height:"300px"};const G=i=>{let r=e.ref({src:i.src!=""?i.src:p.src,poster:i.poster!=""?i.poster:p.poster,volume:i.volume??p.volume,themeColor:i.themeColor!=""?i.themeColor:p.themeColor,activeColor:i.activeColor!=""?i.activeColor:p.activeColor,width:i.width!=""?i.width:p.width,height:i.height!=""?i.height:p.height}),n=e.ref({play:!1,hideControl:!0,distance:0,downState:!1,playState:!1,leftInit:0,isFullScreen:!1,isHalfScreen:!1,isLoading:!0}),c=e.ref({distance:0,downState:!1,topInit:0}),d=e.ref(null),l=e.ref(null),f=e.ref(null),x=e.ref(null),E=e.ref(null),b=e.ref(null),L=e.ref(""),y=e.ref(""),v=e.ref(0),g=e.ref(null),P=e.ref(null),z=e.ref(null),u=e.ref(0),_=e.ref(null);const C=t=>{_.value&&clearTimeout(_.value);let a=document.querySelector(`.${t}`);a.className=`control-fade-enter-active show display-show-style ${t}`},k=t=>{let a=document.querySelector(`.${t}`);a.className=`control-fade-leave-active hide ${t}`,_.value=setTimeout(()=>{a.className=`control-fade-leave-active hide display-hide-style ${t}`},1e3)},M=t=>{L.value=T(l.value.duration)},S=()=>{const t=100*l.value.currentTime/l.value.duration;E.value.style.width=t+"%",b.value.style.left=t-1+"%",y.value=T(l.value.currentTime)},R=t=>{E.value.style.width=0,b.value.style.left=0,y.value="0",n.value.play=!1,n.value.hideControl=!1},$=()=>{const t=(l.value.volume-.05)*100;P.value.style.height=t.toFixed(0)+"%",z.value.style.bottom=t.toFixed(0)+"%"},F=()=>{let t=l.value.duration;if(t>0){for(let a=0;a<l.value.buffered.length;a++)if(l.value.buffered.start(l.value.buffered.length-1-a)<l.value.currentTime){let be=l.value.buffered.end(l.value.buffered.length-1-a)/t*100+"%";x.value.style.width=be;break}}},w=()=>{l.value.addEventListener("loadstart",function(t){}),l.value.addEventListener("durationchange",M),l.value.addEventListener("loadedmetadata",function(t){n.value.isLoading=!1}),l.value.addEventListener("loadeddata",function(t){}),l.value.addEventListener("progress",function(t){F()}),l.value.addEventListener("canplay",function(t){n.value.isLoading=!1}),l.value.addEventListener("canplaythrough",function(t){}),l.value.addEventListener("play",function(t){}),l.value.addEventListener("pause",function(t){}),l.value.addEventListener("seeking",S),l.value.addEventListener("seeked",function(t){n.value.isLoading=!0}),l.value.addEventListener("waiting",function(t){n.value.isLoading=!0}),l.value.addEventListener("playing",function(t){n.value.isLoading=!1}),l.value.addEventListener("timeupdate",S),l.value.addEventListener("ended",R),l.value.addEventListener("error",function(t){}),l.value.addEventListener("volumechange",$),l.value.addEventListener("stalled",function(t){}),l.value.addEventListener("ratechange",function(t){}),l.value.addEventListener("click",()=>{l.value.paused||l.value.ended?(l.value.ended&&(l.value.currentTime="0"),V("btn")):m("btn")})},V=t=>{t&&(n.value.playState=!0),n.value.play=!0,l.value.play()},m=t=>{t&&(n.value.playState=!1),l.value.pause(),n.value.play=!1},I=t=>{Y(),n.value.downState=!0,m(),n.value.distance=t.clientX-n.value.leftInit},B=t=>{if(!n.value.downState)return;let a=t.clientX-n.value.leftInit;a>v.value&&(a=v.value),a<0&&(a=0),n.value.distance=a,l.value.currentTime=n.value.distance/v.value*l.value.duration},O=()=>{n.value.downState=!1,l.value.currentTime=n.value.distance/v.value*l.value.duration,y.value=T(l.value.currentTime),n.value.playState&&V()},U=t=>{c.value.topInit=D(g.value).top,u.value=g.value.clientHeight,c.value.downState=!0,c.value.distance=u.value-(t.clientY-c.value.topInit)},o=t=>{if(!c.value.downState)return;let a=c.value.topInit+u.value-t.clientY;a>u.value&&(a=u.value),a<0&&(a=0),c.value.distance=a,l.value.volume=c.value.distance/u.value>1?1:c.value.distance/u.value,r.value.volume=Math.round(l.value.volume*100)},s=t=>{t.stopPropagation(),c.value.downState=!1,l.value.volume=c.value.distance/u.value>1?1:c.value.distance/u.value,r.value.volume=Math.round(l.value.volume*100)},ke=t=>{t.stopPropagation(),l.value.volume*100>0&&l.value.volume*100<=100?l.value.volume=0:l.value.volume=1,r.value.volume=Math.round(l.value.volume*100),c.value.distance=Math.round(l.value.volume*100)},Se=(t,a)=>{switch(a){case"start":n.value.hideControl=!1;break;case"end":n.value.hideControl=!0;break}},Ve=()=>{n.value.isFullScreen=!n.value.isFullScreen,n.value.isFullScreen?W():X()},Ee=()=>{let t=(document.body.offsetHeight/2).toFixed(0),a=(document.body.offsetWidth/2).toFixed(0);n.value.isHalfScreen=!n.value.isHalfScreen,n.value.isHalfScreen?(d.value.style.width=a+"px",d.value.style.height=t+"px"):(d.value.style.width=r.value.width,d.value.style.height=r.value.height)},T=t=>{let a=Math.floor(t/60);return a<10&&(a="0"+a),a+":"+(t%60/100).toFixed(2).slice(-2)},D=(t,a)=>(a||(a={},a.left=0,a.top=0),t===document.body||t===null?a:(a.top+=t.offsetTop,a.left+=t.offsetLeft,D(t.offsetParent,a))),W=()=>{let t=document.documentElement;t.requestFullscreen?t.requestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullScreen&&t.webkitRequestFullScreen(),d.value.style.width="100%",d.value.style.height="100%"},X=()=>{let t=document;t.exitFullscreen?t.exitFullscreen():t.mozCancelFullScreen?t.mozCancelFullScreen():t.webkitCancelFullScreen&&t.webkitCancelFullScreen(),d.value.style.width=r.value.width,d.value.style.height=r.value.height},Y=()=>{var t;v.value<=0&&(v.value=f.value.clientWidth),n.value.leftInit<=0&&(n.value.leftInit=D(f.value).left),l.value.volume=((t=r.value)==null?void 0:t.volume)/100};return e.onMounted(()=>{Y(),w()}),{videoConfig:r,videoState:n,voiceState:c,videoRef:d,videoDomRef:l,videoProOutRef:f,videoCacheRef:x,videoProRef:E,videoPoiRef:b,duration:L,currentTime:y,processWidth:v,voiceProOutRef:g,voiceProRef:P,voicePoiRef:z,voiceProcessHeight:u,handleHalfScreen:Ee,handleMouseEnterControlVoice:C,handleMouseLeaveControlVoice:k,handleProgressDown:I,handleInitVideo:w,play:V,pause:m,handleProgressMove:B,handleProgressUp:O,handleVolProgressDown:U,handleVolProgressMove:o,handleClickVoice:ke,handleVolProgressUp:s,handleControls:Se,handleScreen:Ve,timeTranslate:T,getOffset:D,fullScreen:W,exitFullscreen:X}},J=e.defineComponent({__name:"svgIcon",props:{iconClass:{default:""},iconStyle:{},className:{default:""},size:{default:"12"}},setup(i){const r=i;let n=e.useAttrs();const c=e.computed(()=>`customer-video-iconfont icon-${r.iconClass}`),d=e.computed(()=>{const{size:l}=r;let f=`${l}`;return f=`${f.replace("px","")}px`,{width:f,height:f,fill:"currentColor",...r.iconStyle}});return(l,f)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({style:d.value},e.unref(n),{class:"svg-style u-f u-f-ac u-f-ajc","aria-hidden":"true"}),[e.createElementVNode("span",{style:e.normalizeStyle("font-size:"+e.unref(r).size+"px"),class:e.normalizeClass(c.value)},null,6)],16))}}),we="",q=(i,r)=>{const n=i.__vccOpts||i;for(const[c,d]of r)n[c]=d;return n},h=q(J,[["__scopeId","data-v-b6897bae"]]),K={style:{position:"relative"}},Q={key:0,class:"loading-style u-f u-f-ac u-f-ajc"},Z={class:"loading-icon"},ee=e.defineComponent({__name:"loading",props:{isLoading:{type:Boolean,default:!0},classData:{default:""},themeColor:{default:""}},setup(i){const r=i;let n=r.themeColor??"blue",c=e.useAttrs();return(d,l)=>(e.openBlock(),e.createElementBlock("div",K,[e.unref(r).isLoading?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[e.createElementVNode("span",{style:e.normalizeStyle("background:"+e.unref(n))},null,4),e.createElementVNode("span",{style:e.normalizeStyle("background:"+e.unref(n))},null,4),e.createElementVNode("span",{style:e.normalizeStyle("background:"+e.unref(n))},null,4),e.createElementVNode("span",{style:e.normalizeStyle("background:"+e.unref(n))},null,4),e.createElementVNode("span",{style:e.normalizeStyle("background:"+e.unref(n))},null,4)])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({class:e.unref(r).classData!=""?e.unref(r).classData:"app-container"},e.unref(c)),[e.renderSlot(d.$slots,"default",{},void 0,!0)],16)]))}}),Ne="",te=q(ee,[["__scopeId","data-v-0841ec04"]]),j=i=>(e.pushScopeId("data-v-fdd444b6"),i=i(),e.popScopeId(),i),le=["poster"],oe=["src"],ne=j(()=>e.createElementVNode("p",null,"设备不支持",-1)),ae={class:"custom-video-control"},se={class:"u-f u-f-ajs custom-video-control-all"},ie={style:{display:"flex",width:"100%"}},re={class:"custom-video-control-control u-f u-f-ac u-f-ajc"},de={class:"custom-video-control-voice-bg-number"},ce={class:"custom-video-control-time u-f u-f-ac u-f-ajc margin-right-5"},ue={style:{"user-select":"none"}},fe={style:{"user-select":"none"}},me={class:"custom-video-control-full u-f"},ve={class:"margin-right-10 u-f u-f-ac u-f-ajc"},pe=j(()=>e.createElementVNode("div",{class:"halfScreen-style display-hide-style"}," 宽屏模式 ",-1)),he={class:"u-f u-f-ac u-f-ajc"},ye=j(()=>e.createElementVNode("div",{class:"fullScreen-style display-hide-style"}," 全屏模式 ",-1)),ge=e.defineComponent({__name:"customVideo",props:{src:{default:""},poster:{default:""},volume:{default:20},themeColor:{default:""},activeColor:{default:""},width:{default:""},height:{default:""}},setup(i){const r=i,n=e.useAttrs();let c=e.ref(!0),{videoConfig:d,videoState:l,videoRef:f,videoDomRef:x,videoProOutRef:E,videoCacheRef:b,videoProRef:L,videoPoiRef:y,duration:v,currentTime:g,voiceProOutRef:P,voiceProRef:z,voicePoiRef:u,handleHalfScreen:_,handleMouseEnterControlVoice:C,handleMouseLeaveControlVoice:k,handleProgressDown:M,play:S,pause:R,handleProgressMove:$,handleProgressUp:F,handleVolProgressDown:w,handleVolProgressMove:V,handleClickVoice:m,handleVolProgressUp:I,handleControls:B,handleScreen:O}=G(r);return(U,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"custom-video"},e.unref(n)),[e.createElementVNode("div",{class:"custom-video-container",ref_key:"videoRef",ref:f,onMouseover:o[22]||(o[22]=s=>e.unref(B)(s,"start")),onMouseleave:o[23]||(o[23]=s=>e.unref(B)(s,"end"))},[e.unref(l).play?(e.openBlock(),e.createElementBlock("div",{key:0,class:"u-f u-f-ac u-f-ajc",onClick:o[0]||(o[0]=s=>e.unref(R)("btn")),style:{position:"absolute",height:"100%",width:"100%","z-index":"99"}},[e.unref(l).isLoading?(e.openBlock(),e.createBlock(e.unref(te),{key:0,style:{height:"50px",width:"100%"},themeColor:e.unref(d).themeColor,isLoading:e.unref(c)},null,8,["themeColor","isLoading"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock("div",{key:1,class:"u-f u-f-ac u-f-ajc",onClick:o[2]||(o[2]=s=>e.unref(S)("btn")),style:{position:"absolute",height:"100%",width:"100%","z-index":"99"}},[e.unref(l).play?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(e.unref(h),{key:0,style:e.normalizeStyle("color:"+e.unref(d).themeColor+";height:70px;width: 70px;"),size:70,onClick:o[1]||(o[1]=s=>e.unref(S)("btn")),iconClass:"bofang"},null,8,["style"]))])),e.createElementVNode("video",{class:"custom-video-video",ref_key:"videoDomRef",ref:x,poster:e.unref(d).poster},[e.createElementVNode("source",{src:e.unref(d).src,type:"video/mp4"},null,8,oe),ne],8,le),e.createVNode(e.Transition,{name:"slide-fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",ae,[e.createElementVNode("div",{class:"custom-video-control-bg",onMousedown:o[3]||(o[3]=(...s)=>e.unref(M)&&e.unref(M)(...s)),onMousemove:o[4]||(o[4]=(...s)=>e.unref($)&&e.unref($)(...s)),onMouseup:o[5]||(o[5]=(...s)=>e.unref(F)&&e.unref(F)(...s))},[e.createElementVNode("div",{class:"custom-video-control-bg-outside",ref_key:"videoProOutRef",ref:E},[e.createElementVNode("span",{class:"custom-video-control-bg-inside-cache",ref_key:"videoCacheRef",ref:b},null,512),e.createElementVNode("span",{class:"custom-video-control-bg-inside",ref_key:"videoProRef",ref:L},null,512),e.createElementVNode("span",{class:"custom-video-control-bg-inside-point",ref_key:"videoPoiRef",ref:y},null,512)],512)],32),e.createElementVNode("div",se,[e.createElementVNode("div",ie,[e.createElementVNode("div",re,[e.unref(l).play?(e.openBlock(),e.createBlock(e.unref(h),{key:0,size:24,class:"custom-video-control-control-play custom-video-control-control-pause",onClick:o[6]||(o[6]=s=>e.unref(R)("btn")),style:e.normalizeStyle("color:"+e.unref(d).themeColor),iconClass:"zanting"},null,8,["style"])):(e.openBlock(),e.createBlock(e.unref(h),{key:1,size:24,class:"custom-video-control-control-play",onClick:o[7]||(o[7]=s=>e.unref(S)("btn")),style:e.normalizeStyle("color:"+e.unref(d).themeColor),iconClass:"bofang"},null,8,["style"]))]),e.createElementVNode("div",{class:"custom-video-control-voice u-f u-f-ac u-f-ajc margin-right-5",onMousemove:o[15]||(o[15]=(...s)=>e.unref(V)&&e.unref(V)(...s))},[e.createVNode(e.unref(h),{size:20,onClick:e.unref(m),onMouseleave:o[8]||(o[8]=s=>e.unref(k)("custom-video-control-voice-bg")),onMousemove:o[9]||(o[9]=s=>e.unref(C)("custom-video-control-voice-bg")),style:e.normalizeStyle("color:"+e.unref(d).themeColor),class:"custom-video-control-voice-play",iconClass:"laba"},null,8,["onClick","style"]),e.createElementVNode("div",{class:"custom-video-control-voice-bg display-hide-style",ref:"custom-video-control-voice-bg",onMouseleave:o[12]||(o[12]=s=>e.unref(k)("custom-video-control-voice-bg")),onMousemove:o[13]||(o[13]=s=>e.unref(C)("custom-video-control-voice-bg"))},[e.createElementVNode("div",de,e.toDisplayString(e.unref(d).volume),1),e.createElementVNode("div",{class:"custom-video-control-voice-bg-outside",ref_key:"voiceProOutRef",ref:P,onMousedown:o[10]||(o[10]=(...s)=>e.unref(w)&&e.unref(w)(...s)),onMouseup:o[11]||(o[11]=(...s)=>e.unref(I)&&e.unref(I)(...s))},[e.createElementVNode("span",{class:"custom-video-control-voice-bg-inside",ref_key:"voiceProRef",ref:z},null,512),e.createElementVNode("span",{class:"custom-video-control-voice-bg-point",ref_key:"voicePoiRef",ref:u},null,512)],544)],544),e.createElementVNode("div",{onClick:o[14]||(o[14]=(...s)=>e.unref(m)&&e.unref(m)(...s)),style:{position:"absolute",height:"35px",width:"18px",bottom:"0px",left:"0px"}})],32),e.createElementVNode("div",ce,[e.createElementVNode("span",ue,e.toDisplayString(e.unref(g)?e.unref(g):"00:00"),1),e.createTextVNode(" / "),e.createElementVNode("span",fe,e.toDisplayString(e.unref(v)?e.unref(v):"00:00"),1)])]),e.createElementVNode("div",me,[e.createElementVNode("div",ve,[e.createVNode(e.unref(h),{size:18,onMouseleave:o[16]||(o[16]=s=>e.unref(k)("halfScreen-style")),onMousemove:o[17]||(o[17]=s=>e.unref(C)("halfScreen-style")),style:e.normalizeStyle("color:"+e.unref(d).themeColor),class:"custom-video-control-full-icon",onClick:e.unref(_),iconClass:e.unref(l).isHalfScreen?"suoxiaotuichuquanpingshouhui":"quanping1"},null,8,["style","onClick","iconClass"]),pe,e.createElementVNode("div",{onClick:o[18]||(o[18]=(...s)=>e.unref(m)&&e.unref(m)(...s)),style:{"z-index":"-1",position:"absolute",height:"35px",width:"18px",bottom:"0px",left:"0px"}})]),e.createElementVNode("div",he,[e.createVNode(e.unref(h),{size:18,onMouseleave:o[19]||(o[19]=s=>e.unref(k)("fullScreen-style")),onMousemove:o[20]||(o[20]=s=>e.unref(C)("fullScreen-style")),style:e.normalizeStyle("color:"+e.unref(d).themeColor),class:"custom-video-control-full-icon",onClick:e.unref(O),iconClass:e.unref(l).isFullScreen?"tuichuquanping":"quanping2"},null,8,["style","onClick","iconClass"]),ye,e.createElementVNode("div",{onClick:o[21]||(o[21]=(...s)=>e.unref(m)&&e.unref(m)(...s)),style:{"z-index":"-1",position:"absolute",height:"35px",width:"100%",bottom:"0px",left:"0px"}})])])])],512),[[e.vShow,!e.unref(l).hideControl||e.unref(l).play]])]),_:1})],544)],16))}}),xe="";let Ce=[q(ge,[["__scopeId","data-v-fdd444b6"]])];const A=i=>{Ce.map(r=>{i.component(r.__name,r)})};let H=window;if(typeof H<"u"&&H.Vue){const i=H.Vue.createApp({});A(i)}return A});