@vuux/video
Version:
Vue Nuxt 视频播放器
2 lines (1 loc) • 10.4 kB
JavaScript
"use strict";const e=require("vue"),v=require("./component/switch.vue.cjs"),R=require("./component/volume.vue.cjs"),$=require("./component/progress.vue.cjs"),I=require("./component/loading.vue.cjs"),L=require("./component/context-menu.vue.cjs"),O=require("./hook/useInit.cjs"),X=require("./hook/useControllerUI.cjs"),A=require("./hook/useState.cjs"),H=require("./hook/useEvent.cjs"),f=require("@vuux/utils"),W=require("./hook/useStyles.cjs"),j=require("./hook/useDrag.cjs"),G={key:0,class:"video-lights"},J={key:1,class:"video-title"},K={key:2,class:"video-watermark"},Q=["src"],Y={class:"video-data"},Z=["muted","volume","loop"],ee=["src","type"],te={class:"video-cover"},oe=["src"],le={class:"controller-data"},ne={class:"controller-tools"},se={class:"is-play"},re={class:"is-pause"},ue={class:"is-mute"},ie={class:"is-up"},ae={class:"is-down"},de={key:0,class:"tool-item"},me={key:1,class:"tool-item time-box"},ve={class:"controller-tools"},fe={key:0,class:"tool-item is-rate"},pe=["onClick"],ce={key:1,class:"tool-item is-setting"},Ve=e.defineComponent({__name:"index",props:{theme:{default:"#00a1d6"},width:{default:"100%"},src:{default:""},title:{default:""},poster:{default:""},startTime:{default:0},rate:{default:()=>[2,1.5,1.25,1,.75,.5]},muted:{type:Boolean,default:!1},volume:{default:.8},buttons:{default:()=>["time","rate","volume","setting","pip","webFull","full"]},watermark:{},contextMenu:{default:()=>[]},scrollFlex:{type:Boolean}},emits:["play","pause","ready","loading","error","menu"],setup(g,{emit:M}){const n=g,p=M,u=e.useTemplateRef("playerEl"),c=e.useTemplateRef("videoPlaceholderEl"),i=e.useTemplateRef("videoEl"),m=e.ref(!f.Utils.isMobile()),{state:o}=A.useVideoState(n),{removeAllManaged:C}=f.Utils.useManagedEvents(),{onMouseEnter:s,onMouseLeave:r,handleMouseMove:V,handleMouseLeave:E}=X.useControllerUI(u,o),{initVideo:b,initHls:B}=O.useInit(i,n,o),{syncVideoStatus:S,stopProgressLoop:x,handleFull:a,handleMutedPlay:k,handlePlaybackRate:_,handlePlayOrPause:d,handleMousemove:D,progressClick:T,handlePip:N}=H.useVideoEvent(u,i,o,p),{styles:q,isVisible:y,classNames:F}=W.useStyles(n,o,m,c),U=e.computed(()=>!y.value);j(u,u,U,y);const h=w=>{p("menu",w)},P=e.watchEffect(()=>{i.value&&(o.src=n.src,o.src.endsWith(".m3u8")?B():o.type="video/mp4",i.value.load())});return e.onMounted(async()=>{await e.nextTick(),m.value=!f.Utils.isMobile(),b(),S()}),e.onUnmounted(()=>{P(),C(),x(),clearTimeout(o.clearTime)}),(w,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[n.scrollFlex?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"videoPlaceholderEl",ref:c,class:"app-video-placeholder"},null,512)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"playerEl",ref:u,class:e.normalizeClass(["app-video",e.unref(F)]),style:e.normalizeStyle(e.unref(q)),onMousemove:t[34]||(t[34]=(...l)=>e.unref(V)&&e.unref(V)(...l)),onMouseleave:t[35]||(t[35]=(...l)=>e.unref(E)&&e.unref(E)(...l))},[e.unref(o).lights?(e.openBlock(),e.createElementBlock("div",G)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:"video-mask",onClick:t[0]||(t[0]=(...l)=>e.unref(d)&&e.unref(d)(...l))}),n.title?(e.openBlock(),e.createElementBlock("div",J,e.toDisplayString(n.title),1)):e.createCommentVNode("",!0),n.watermark?.src?(e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("img",{src:n.watermark?.src,style:e.normalizeStyle(`width: ${n.watermark.width}; height: ${n.watermark.height}`)},null,12,Q)])):e.createCommentVNode("",!0),e.createVNode(I,{"video-status":e.unref(o).videoStatus,"but-status":e.unref(o).butStatus,mssage:e.unref(o).mssage,onReplay:e.unref(d)},null,8,["video-status","but-status","mssage","onReplay"]),e.createVNode(L,{el:u.value,"context-menu":n.contextMenu,onContextMenu:h},null,8,["el","context-menu"]),e.createElementVNode("div",Y,[e.createElementVNode("video",{ref_key:"videoEl",ref:i,"x5-playsinline":"","x5-video-player-type":"h5",class:e.normalizeClass({"is-mirror":e.unref(o).mirror}),preload:"auto",controls:!1,muted:e.unref(o)._muted,volume:e.unref(o)._volume,loop:e.unref(o).loop,"webkit-playsinline":"",playsinline:"","x-webkit-airplay":"allow",onDblclick:t[1]||(t[1]=(...l)=>e.unref(a)&&e.unref(a)(...l))},[e.createElementVNode("source",{src:e.unref(o).src,type:e.unref(o).type},null,8,ee)],42,Z),e.withDirectives(e.createElementVNode("div",te,[e.createElementVNode("img",{src:n.poster},null,8,oe)],512),[[e.vShow,e.unref(o).isPoster]])]),e.createElementVNode("div",{class:e.normalizeClass(["video-controller",{"is-active":e.unref(o).control&&m.value}]),onContextmenu:t[33]||(t[33]=e.withModifiers(()=>{},["prevent"]))},[e.createVNode($,{modelValue:e.unref(o).progress,"onUpdate:modelValue":t[2]||(t[2]=l=>e.unref(o).progress=l),"hover-text":e.unref(o).cursorTime,loaded:e.unref(o).loaded,onChange:e.unref(T),onOnMousemove:e.unref(D)},null,8,["modelValue","hover-text","loaded","onChange","onOnMousemove"]),e.createElementVNode("div",le,[e.createElementVNode("div",ne,[e.createElementVNode("div",{class:"tool-item",onClick:t[3]||(t[3]=l=>e.unref(d)(l))},[e.withDirectives(e.createElementVNode("div",se,null,512),[[e.vShow,e.unref(o).butStatus=="play"]]),e.withDirectives(e.createElementVNode("div",re,null,512),[[e.vShow,e.unref(o).butStatus=="pause"]])]),e.createElementVNode("div",{class:"tool-item",onClick:t[4]||(t[4]=(...l)=>e.unref(k)&&e.unref(k)(...l))},[e.withDirectives(e.createElementVNode("div",ue,null,512),[[e.vShow,e.unref(o)._volume==0||e.unref(o)._muted]]),e.withDirectives(e.createElementVNode("div",ie,null,512),[[e.vShow,e.unref(o)._volume>=.5||e.unref(o)._volume==1]]),e.withDirectives(e.createElementVNode("div",ae,null,512),[[e.vShow,e.unref(o)._volume<.5&&e.unref(o)._volume>0]])]),n.buttons.includes("volume")?(e.openBlock(),e.createElementBlock("div",de,[e.createVNode(R,{modelValue:e.unref(o)._volume,"onUpdate:modelValue":t[5]||(t[5]=l=>e.unref(o)._volume=l),onChange:t[6]||(t[6]=l=>e.unref(o)._muted=!1)},null,8,["modelValue"])])):e.createCommentVNode("",!0),n.buttons.includes("time")?(e.openBlock(),e.createElementBlock("div",me,[e.createElementVNode("span",null,e.toDisplayString(e.unref(o).currentTime),1),t[36]||(t[36]=e.createElementVNode("span",null,"/",-1)),e.createElementVNode("span",null,e.toDisplayString(e.unref(o).totalTime),1)])):e.createCommentVNode("",!0)]),e.createElementVNode("div",ve,[n.buttons.includes("rate")?(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("div",{class:"is-rate",onMouseenter:t[7]||(t[7]=()=>e.unref(s)("rate")),onMouseleave:t[8]||(t[8]=()=>e.unref(r)())},e.toDisplayString(e.unref(o).speed==1?"倍速":e.unref(o).speed+" X"),33),e.createVNode(e.Transition,{name:"tooltip"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("ul",{onMouseenter:t[9]||(t[9]=()=>e.unref(s)("rate")),onMouseleave:t[10]||(t[10]=()=>e.unref(r)())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.rate,(l,z)=>(e.openBlock(),e.createElementBlock("li",{key:z,class:e.normalizeClass({"is-active":e.unref(o).speed==l}),onClick:Ee=>e.unref(_)(l)},e.toDisplayString(l)+" X",11,pe))),128))],544),[[e.vShow,e.unref(o).show=="rate"]])]),_:1})])):e.createCommentVNode("",!0),n.buttons.includes("setting")?(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{class:"is-setting",onMouseenter:t[11]||(t[11]=()=>e.unref(s)("setting")),onMouseleave:t[12]||(t[12]=()=>e.unref(r)())},null,32),e.createVNode(e.Transition,{name:"tooltip"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("ul",{onMouseenter:t[16]||(t[16]=()=>e.unref(s)("setting")),onMouseleave:t[17]||(t[17]=()=>e.unref(r)())},[e.createElementVNode("li",null,[t[37]||(t[37]=e.createElementVNode("span",null,"镜像画面",-1)),e.createVNode(v,{modelValue:e.unref(o).mirror,"onUpdate:modelValue":t[13]||(t[13]=l=>e.unref(o).mirror=l)},null,8,["modelValue"])]),e.createElementVNode("li",null,[t[38]||(t[38]=e.createElementVNode("span",null,"循环播放",-1)),e.createVNode(v,{modelValue:e.unref(o).loop,"onUpdate:modelValue":t[14]||(t[14]=l=>e.unref(o).loop=l)},null,8,["modelValue"])]),e.createElementVNode("li",null,[t[39]||(t[39]=e.createElementVNode("span",null,"关灯模式",-1)),e.createVNode(v,{modelValue:e.unref(o).lights,"onUpdate:modelValue":t[15]||(t[15]=l=>e.unref(o).lights=l)},null,8,["modelValue"])])],544),[[e.vShow,e.unref(o).show=="setting"]])]),_:1})])):e.createCommentVNode("",!0),n.buttons.includes("pip")?(e.openBlock(),e.createElementBlock("div",{key:2,class:"tool-item is-pip",onClick:t[22]||(t[22]=(...l)=>e.unref(N)&&e.unref(N)(...l))},[e.createElementVNode("div",{class:"is-pip",onMouseenter:t[18]||(t[18]=()=>e.unref(s)("pip")),onMouseleave:t[19]||(t[19]=()=>e.unref(r)())},null,32),e.createVNode(e.Transition,{name:"tooltip"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"item-tip",onMouseenter:t[20]||(t[20]=()=>e.unref(s)("pip")),onMouseleave:t[21]||(t[21]=()=>e.unref(r)())},"画中画",544),[[e.vShow,e.unref(o).show=="pip"]])]),_:1})])):e.createCommentVNode("",!0),n.buttons.includes("webFull")?(e.openBlock(),e.createElementBlock("div",{key:3,class:"tool-item is-web-full",onClick:t[27]||(t[27]=l=>e.unref(o).webFull=!e.unref(o).webFull)},[e.createElementVNode("div",{class:"is-web-full",onMouseenter:t[23]||(t[23]=()=>e.unref(s)("webFull")),onMouseleave:t[24]||(t[24]=()=>e.unref(r)())},null,32),e.createVNode(e.Transition,{name:"tooltip"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"item-tip",onMouseenter:t[25]||(t[25]=()=>e.unref(s)("webFull")),onMouseleave:t[26]||(t[26]=()=>e.unref(r)())},e.toDisplayString(e.unref(o).webFull?"退出全屏":"网页全屏"),545),[[e.vShow,e.unref(o).show=="webFull"]])]),_:1})])):e.createCommentVNode("",!0),n.buttons.includes("full")?(e.openBlock(),e.createElementBlock("div",{key:4,class:"tool-item is-full",onClick:t[32]||(t[32]=(...l)=>e.unref(a)&&e.unref(a)(...l))},[e.createElementVNode("div",{class:"is-full",onMouseenter:t[28]||(t[28]=()=>e.unref(s)("full")),onMouseleave:t[29]||(t[29]=()=>e.unref(r)())},null,32),e.createVNode(e.Transition,{name:"tooltip"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"item-tip",onMouseenter:t[30]||(t[30]=()=>e.unref(s)("full")),onMouseleave:t[31]||(t[31]=()=>e.unref(r)())},e.toDisplayString(e.unref(o).full?"退出全屏":"全屏"),545),[[e.vShow,e.unref(o).show=="full"]])]),_:1})])):e.createCommentVNode("",!0)])])],34)],38)],64))}});module.exports=Ve;