hzwl-easy-player/dist/hzwl-easy-player.umd.js

基于Vue 3的视频播放器组件，支持单屏和多屏播放模式

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.HzwlEasyPlayer={},i.Vue))})(this,function(i,e){"use strict";const b=(o,w)=>{const E=o.__vccOpts||o;for(const[t,n]of w)E[t]=n;return E},V={key:0,class:"player-wrapper"},T=["id"],O=["id","onClick"],$=["id","onClick"],z=["id","onClick"],x=["id","onClick"],F=["id","onClick"],p=b({__name:"EasyPlayer",props:{playerId:{type:String,default:""},videoUrl:{type:String,default:""},videoBuffer:{type:Number,default:.2},videoBufferDelay:{type:Number,default:1},showBandwidth:{type:Boolean,default:!0},showPerformance:{type:Boolean,default:!1},operateBtns:{type:Object,default:()=>({fullscreen:!0,screenshot:!1,play:!0,audio:!0,ptz:!1,quality:!1,performance:!0})},watermarkText:{type:String,default:""},hasAudio:{type:Boolean,default:!0},isNotMute:{type:Boolean,default:!1},multiScreenOne:{type:Boolean,default:!1},multiScreenTwo:{type:Boolean,default:!1},multiScreenFour:{type:Boolean,default:!1},multiScreenSix:{type:Boolean,default:!1},multiScreenNine:{type:Boolean,default:!1},multiScreenSixteen:{type:Boolean,default:!1}},emits:["player-click"],setup(o,{expose:w,emit:E}){const t=o;e.ref(!1);const n=e.ref(null);e.reactive({hasAudio:!0,isLive:!0,MSE:!1,WCS:!1,WASM:!0});const s=e.ref(null),y=l=>{s.value=l},v=()=>{if(!s.value&&!t.multiScreenOne){console.warn("请先选择要全屏的播放器");return}const l=t.multiScreenOne?n.value[1]:n.value[s.value];if(!l){console.error("播放器实例不存在");return}l.setFullscreen(!0)},B=()=>{if(!s.value&&!t.multiScreenOne){console.warn("请先选择要暂停的播放器");return}const l=t.multiScreenOne?n.value[1]:n.value[s.value];if(!l){console.error("播放器实例不存在");return}l.pause()},L=()=>{if(!s.value&&!t.multiScreenOne){console.warn("请先选择要静音的播放器");return}const l=t.multiScreenOne?n.value[1]:n.value[s.value];if(!l){console.error("播放器实例不存在");return}l.setMute(!0)},P=()=>{if(!s.value&&!t.multiScreenOne){console.warn("请先选择要播放的播放器");return}const l=t.multiScreenOne?1:s.value,a=t.multiScreenOne?n.value[1]:n.value[s.value];if(!a){console.error("播放器实例不存在");return}m[l]&&B(),setTimeout(r=>{a.play(r).then(()=>{m[l]=!0}).catch(c=>{console.error(c),m[l]=!1})},1e3,t.videoUrl)},S=()=>new Promise((l,a)=>{n.value&&(Object.values(n.value).forEach((r,c)=>{r&&(r.destroy(),m[c+1]=!1)}),n.value=null),setTimeout(()=>{l()},100)}),A=()=>{S().then(()=>{h(),P()})},m=e.reactive({}),h=()=>{let l=1;t.multiScreenTwo?l=2:t.multiScreenFour?l=4:t.multiScreenSix?l=6:t.multiScreenNine?l=9:t.multiScreenSixteen&&(l=16);for(let a=1;a<=l;a++){m[a]=!1;const r=t.multiScreenOne?t.playerId:`${t.playerId}${a}`,c=document.getElementById(r);if(!c){console.error("Container element not found:",r);continue}const u=new window.EasyPlayerPro({container:c,videoBuffer:t.videoBuffer,videoBufferDelay:Number(t.videoBufferDelay),decoder:"/js/EasyPlayer/decoder-pro.js",isResize:!0,loadingText:"加载中",debug:!1,debugLevel:"debug",useMSE:!1,useSIMD:!1,useWCS:!1,useWASM:!0,hasAudio:t.hasAudio,websocket1006ErrorReplay:!0,networkDelayTimeoutReplay:!0,useMThreading:!0,showBandwidth:t.showBandwidth,showPerformance:t.showPerformance,gpuDecoder:!0,operateBtns:t.operateBtns,timeout:10,qualityConfig:["普清","高清","超清"],forceNoOffscreen:!0,isNotMute:t.isNotMute,heartTimeout:5,ptzClickType:"mouseDownAndUp",ptzZoomShow:!0,ptzMoreArrowShow:!0,ptzApertureShow:!0,ptzFocusShow:!0,pauseAndNextPlayUseLastFrameShow:!0,heartTimeoutReplayUseLastFrameShow:!0,replayUseLastFrameShow:!0,fullscreenWatermarkConfig:{text:t.watermarkText}});u.on("error",d=>{console.error("EasyPlayer error:",d)}),u.on("fullscreen",function(d){console.log("is fullscreen",d)}),u.on("playbackRate",d=>{u.setRate(d)}),u.on("playbackSeek",d=>{console.log("playbackSeek",d)}),n.value||(n.value={}),n.value[a]=u}},g=()=>new Promise((l,a)=>{if(window.EasyPlayerPro){console.log("EasyPlayerPro 已加载"),typeof Worker<"u"?l(!0):a(new Error("此浏览器不支持Web Workers"));return}let r=0;const c=50,u=100;console.log("等待EasyPlayerPro加载..."),new Promise((k,W)=>{if(document.querySelector('script[src*="EasyPlayer-pro.js"]')){k();return}const f=document.createElement("script");f.src="/js/EasyPlayer/EasyPlayer-pro.js",f.async=!0,f.onload=()=>{k()},f.onerror=C=>{console.error("EasyPlayerPro脚本加载失败",C),W(C)},document.head.appendChild(f)}).catch(k=>console.error("脚本加载错误:",k));const N=()=>{if(r++,window.EasyPlayerPro){console.log(`EasyPlayerPro 已加载，尝试了 ${r} 次`),typeof Worker<"u"?l(!0):a(new Error("此浏览器不支持Web Workers"));return}if(r>=c){console.error("EasyPlayerPro加载失败，请检查脚本是否正确引入"),a(new Error("Failed to load EasyPlayerPro"));return}setTimeout(N,u)};N()}),U=e.computed(()=>({multiScreenOne:t.multiScreenOne,multiScreenTwo:t.multiScreenTwo,multiScreenFour:t.multiScreenFour,multiScreenSix:t.multiScreenSix,multiScreenNine:t.multiScreenNine,multiScreenSixteen:t.multiScreenSixteen}));return e.onMounted(async()=>{try{await e.nextTick(),await g(),h()}catch(l){console.error("初始化EasyPlayer失败:",l)}}),e.onBeforeUnmount(()=>{console.log("EasyPlayer组件卸载"),S().then(()=>{console.log("播放器资源已释放")}).catch(l=>{console.error("播放器资源释放失败:",l)})}),e.watch(()=>t.videoUrl,async(l,a)=>{if(console.log("视频URL变化:",a,"->",l),!l){console.log("URL为空，不进行操作");return}try{await g(),await S(),h(),P()}catch(r){console.error("URL变化后初始化播放器失败:",r)}}),w({onPlayer:P,onPause:B,onDestroy:S,onMute:L,setFullscreen:v,onReplay:A}),(l,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["bigbox",U.value])},[o.multiScreenOne?(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===1}])},[e.createElementVNode("div",{id:o.playerId,class:"player",onClick:a[0]||(a[0]=r=>y(1))},null,8,T)],2)])):e.createCommentVNode("",!0),o.multiScreenTwo?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},e.renderList(2,r=>e.createElementVNode("div",{key:r,class:"player-wrapper"},[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===r}])},[e.createElementVNode("div",{id:`${o.playerId}${r}`,class:"player",onClick:c=>y(r)},null,8,O)],2)])),64)):e.createCommentVNode("",!0),o.multiScreenFour?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},e.renderList(4,r=>e.createElementVNode("div",{key:r,class:"player-wrapper"},[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===r}])},[e.createElementVNode("div",{id:`${o.playerId}${r}`,class:"player",onClick:c=>y(r)},null,8,$)],2)])),64)):e.createCommentVNode("",!0),o.multiScreenSix?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},e.renderList(6,r=>e.createElementVNode("div",{key:r,class:"player-wrapper"},[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===r}])},[e.createElementVNode("div",{id:`${o.playerId}${r}`,class:"player",onClick:c=>y(r)},null,8,z)],2)])),64)):e.createCommentVNode("",!0),o.multiScreenNine?(e.openBlock(),e.createElementBlock(e.Fragment,{key:4},e.renderList(9,r=>e.createElementVNode("div",{key:r,class:"player-wrapper"},[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===r}])},[e.createElementVNode("div",{id:`${o.playerId}${r}`,class:"player",onClick:c=>y(r)},null,8,x)],2)])),64)):e.createCommentVNode("",!0),o.multiScreenSixteen?(e.openBlock(),e.createElementBlock(e.Fragment,{key:5},e.renderList(16,r=>e.createElementVNode("div",{key:r,class:"player-wrapper"},[e.createElementVNode("div",{class:e.normalizeClass(["player-box",{"border-selected":s.value===r}])},[e.createElementVNode("div",{id:`${o.playerId}${r}`,class:"player",onClick:c=>y(r)},null,8,F)],2)])),64)):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-c032e2ce"]]),I=p,M={install(o){o.component("EasyPlayer",p),o.component("HzwlPlayer",p)}};i.EasyPlayer=p,i.HzwlPlayer=I,i.default=M,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});