@vuux/video
Version:
Vue Nuxt 视频播放器
2 lines (1 loc) • 3 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../utils.cjs"),g=require("@vuux/utils"),w=(f,u,e,o)=>{let i=0,p=0;const y=150,{addManaged:t,removeManaged:S}=g.Utils.useManagedEvents(),m=()=>{cancelAnimationFrame(i);const a=r=>{if(i=requestAnimationFrame(a),!u.value||u.value.paused||!r||r-p<y)return;p=r;const n=u.value.duration||0,s=u.value.currentTime||0;e.currentTime=c.timeFormat(s),e.progress=n>0?s/n:0;const d=u.value.buffered;if(d&&d.length&&n>0){const q=d.end(d.length-1);e.loaded=Number((q/n*100).toFixed(2))}};i=requestAnimationFrame(a)},l=()=>cancelAnimationFrame(i),v=(a,r)=>{if(!u.value)return;const n=u.value.duration;if(!isFinite(n)||n<=0)return;const s=Math.max(0,Math.min(n,a));u.value.currentTime=s,e.progress=s/n,e.isPoster=!1,u.value.paused&&!r&&u.value.play().catch(()=>{e.videoStatus="error",e.mssage="视频加载错误",o("error")})},P=async()=>{if(u.value)try{await u.value.play(),e.isPoster=!1,m()}catch{e.videoStatus="loading",await g.Utils.wait(5e3),e.videoStatus="error",e.mssage="视频加载错误",o("error")}},h=()=>{u.value&&(u.value.pause(),e.control=!0,l())},b=a=>{a&&(a.stopPropagation(),a.cancelable&&a.preventDefault()),u.value&&(u.value.paused?P():h())},T=()=>{f.value&&(e.full=c.fullScreen(f.value))},F=()=>{u.value&&(e._volume>0?(e._volume=0,e._muted=!0):(e._volume=.8,e._muted=!1),u.value.muted=e._muted)},M=a=>{e.speed=a,u.value&&(u.value.playbackRate=a)},_=a=>{u.value&&(e.cursorTime=c.timeFormat((u.value.duration||0)*a))},A=a=>{if(!u.value)return;const r=u.value.duration;if(!isFinite(r)||r<=0)return;const n=a*r;v(n)},U=()=>{if(!u.value)return;const a=()=>{document.removeEventListener("leavepictureinpicture",a)};S(document,"leavepictureinpicture",a),c.pictureInPicture(u.value)},k=()=>{const a=u.value?.duration||0;return e.totalTime=c.timeFormat(a)};return{syncVideoStatus:()=>{!u.value||!f.value||(t(u.value,"play",()=>{e.videoStatus="play",e.butStatus="pause",o("play"),m()}),t(u.value,"pause",()=>{e.videoStatus="paused",e.butStatus="play",o("pause"),l()}),t(u.value,"ended",()=>{e.videoStatus="ended",e.butStatus="play",e.isPoster=!0,e.control=!0,l()}),t(u.value,"progress",()=>{const a=u.value?.duration||0;if(a>0){const r=u.value?.buffered;if(r&&r.length){const n=r.end(r.length-1);e.loaded=Number((n/a*100).toFixed(2))}}}),t(u.value,"loadeddata",()=>{e.videoStatus="play"}),t(u.value,"waiting",()=>{e.videoStatus="loading",e.mssage="加载中",o("loading",!0)}),t(u.value,"playing",()=>{e.videoStatus="playing",e.mssage="",o("loading",!1)}),t(u.value,"canplay",()=>{u.value&&!u.value.paused&&(e.videoStatus="play",e.mssage="")}),t(u.value,"error",()=>{e.videoStatus="error",e.mssage="视频加载错误",o("error"),l()}),t(u.value,"loadedmetadata",()=>{e.videoStatus="play",k(),e.startTime>0&&v(e.startTime,!0),o("ready")}))},stopProgressLoop:l,handleFull:T,handleMutedPlay:F,handlePlaybackRate:M,handlePlayOrPause:b,handleMousemove:_,progressClick:A,handlePip:U}};exports.useVideoEvent=w;