@linker-design-plus/mpegtsplayer 1.0.1 → 1.0.3

package/README.md

@@ -34,6 +34,7 @@ yarn add @linker-design-plus/mpegtsplayer
 // 在 main.js 或入口文件中
 import { createApp } from 'vue';
 import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+import '@linker-design-plus/mpegtsplayer/dist/style.css';
 
 const app = createApp(App);
 app.component('MpegtsPlayer', MpegtsPlayer);
@@ -44,6 +45,7 @@ app.component('MpegtsPlayer', MpegtsPlayer);
 ```vue
 <script setup>
 import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+import '@linker-design-plus/mpegtsplayer/dist/style.css';
 </script>
 ```
 
@@ -148,6 +150,7 @@ import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
 <script setup>
 import { ref } from 'vue';
 import MpegtsPlayer from '@linker-design-plus/mpegtsplayer';
+import '@linker-design-plus/mpegtsplayer/dist/style.css';
 
 const playerRef = ref(null);
 

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,qBAAqB,MAAM,gBAAgB,CAAC;AAEnD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAUs+B,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAT5iC,GAAG;CAIlB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE9E,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,OAAO,qBAAqB,MAAM,gBAAgB,CAAC;AAEnD,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAUw9B,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAArE,GAAG;4CAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;uCAArE,GAAG;wCAA+D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAT9hC,GAAG;CAIlB,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAE9E,eAAe,YAAY,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";const o=require("vue"),u=require("mpegts.js"),O=Symbol("ArcoConfigProvider"),I="arco",N="$arco",x=e=>{var n,t,s;const c=o.getCurrentInstance(),d=o.inject(O,void 0),i=(s=(t=d==null?void 0:d.prefixCls)!=null?t:(n=c==null?void 0:c.appContext.config.globalProperties[N])==null?void 0:n.classPrefix)!=null?s:I;return e?`${i}-${e}`:i},z=Object.prototype.toString;function D(e){return z.call(e)==="[object Number]"&&e===e}var F=(e,n)=>{for(const[t,s]of n)e[t]=s;return e};const j=o.defineComponent({name:"IconLoading",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:n}){const t=x("icon"),s=o.computed(()=>[t,`${t}-loading`,{[`${t}-spin`]:e.spin}]),c=o.computed(()=>{const i={};return e.size&&(i.fontSize=D(e.size)?`${e.size}px`:e.size),e.rotate&&(i.transform=`rotate(${e.rotate}deg)`),i});return{cls:s,innerStyle:c,onClick:i=>{n("click",i)}}}}),A=["stroke-width","stroke-linecap","stroke-linejoin"],V=o.createElementVNode("path",{d:"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"},null,-1),U=[V];function G(e,n,t,s,c,d){return o.openBlock(),o.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:o.normalizeClass(e.cls),style:o.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:n[0]||(n[0]=(...i)=>e.onClick&&e.onClick(...i))},U,14,A)}var y=F(j,[["render",G]]);const W=Object.assign(y,{install:(e,n)=>{var t;const s=(t=n==null?void 0:n.iconPrefix)!=null?t:"";e.component(s+y.name,y)}});const g=o.defineComponent({name:"MpegtsPlayer",props:{videoUrl:{type:String,default:""},closeVisibilityChangeListener:{type:Boolean,default:!1},autoVisibilityChangeRefresh:{type:Boolean,default:!1},autoReload:{type:Boolean,default:!1},isLive:{type:Boolean,default:!0},controls:{type:Boolean,default:!1},currentTime:{type:Number,default:0},stallTimeout:{type:Number,default:5e3}},emits:["loadError","playSuccess","loadComplete","visibilitychange","timeupdate","playEnded","playLoading"],setup(e,{emit:n}){const t=o.ref(null),s=o.ref(null),c=o.ref(!0),d=o.ref(!1),i=o.ref(0);let p=0,m=Date.now();const h=()=>{const a=s.value;t.value=u.createPlayer({type:"flv",isLive:e.isLive,hasAudio:!1,cors:!0,url:e.videoUrl},{enableWorker:!1,enableWorkerForMSE:!1,enableStashBuffer:!e.isLive,stashInitialSize:128,lazyLoad:!1,lazyLoadMaxDuration:.2,deferLoadAfterSourceOpen:!1,liveBufferLatencyChasing:!!e.isLive,liveBufferLatencyMaxLatency:1,liveBufferLatencyMinRemain:.5,autoCleanupSourceBuffer:!0,autoCleanupMinBackwardDuration:30,autoCleanupMaxBackwardDuration:60}),t.value.attachMediaElement(a),c.value=!0,k(),S()},k=async()=>{try{t.value.load()}catch(a){console.log(a),n("loadError",a)}},S=()=>{t.value.on(u.Events.ERROR,C),t.value.on(u.Events.LOADING_COMPLETE,L),t.value.on(u.Events.STATISTICS_INFO,P)},C=(a,l,r)=>{console.log(`类型:${JSON.stringify(a)}`,`报错内容${l}`,"报错信息",r),n("loadError",l)},L=(a,l,r)=>{console.log(`类型:${JSON.stringify(a)}`,`报错内容${l}`,"报错信息",r),console.log("直播已结束"),n("loadComplete"),e.autoReload&&M()},P=a=>{const l=a.decodedFrames,r=Date.now();l===p&&l!==0?r-m>e.stallTimeout&&(console.log(`解码帧数超过 ${e.stallTimeout/1e3} 秒没有更新，可能卡顿了`),n("playLoading")):(p=l,m=r)},M=()=>{console.log("自动加载",i.value),i.value++,i.value<=2?v():i.value=0},v=()=>{t.value!=null&&f(),h()},$=()=>t.value.play(),R=()=>t.value.pause(),f=()=>{var a,l,r,E;t.value&&(t.value.off(u.Events.ERROR,C),t.value.off(u.Events.LOADING_COMPLETE,L),(a=t.value)==null||a.pause(),(l=t.value)==null||l.unload(),(r=t.value)==null||r.detachMediaElement(),(E=t.value)==null||E.destroy(),t.value=null)},B=async a=>{var l;if(!(!((l=a.target)!=null&&l.paused)||!c.value)){c.value=!1,console.log("handleCanplay",a.target.paused),i.value=0,d.value=!1;try{await t.value.play(),console.log(t.value),n("playSuccess")}catch(r){console.log("play error",r),n("loadError",r)}}},T=()=>{d.value=!0},_=a=>{var l;n("timeupdate",((l=a==null?void 0:a.target)==null?void 0:l.currentTime)??0)},w=()=>{n("playEnded")},b=()=>{document.visibilityState==="visible"?(n("visibilitychange",document.visibilityState),e.autoVisibilityChangeRefresh&&v()):f()};return o.watch(()=>e.videoUrl,a=>{a&&o.nextTick(()=>{t.value!=null&&f(),console.log(`isSupported: ${u.isSupported()}`),console.log(`是否支持点播视频：${u.getFeatureList().msePlayback}`),console.log(`是否支持httpflv直播流：${u.getFeatureList().mseLivePlayback}`),h()})},{immediate:!0}),o.onMounted(()=>{e.closeVisibilityChangeListener||document.addEventListener("visibilitychange",b)}),o.onUnmounted(()=>{f(),e.closeVisibilityChangeListener||document.removeEventListener("visibilitychange",b)}),{flvPlayer:t,videoContainerRef:s,loadMetaData:d,start:$,pause:R,destroy:f,reload:v,handleCanplay:B,handleLoadedmetadata:T,handleTimeupdate:_,handlePlayEnded:w}},render(){return React.createElement("div",{class:"mainContainer"},React.createElement("video",{class:"video-container",ref:"videoContainerRef",muted:!0,controls:this.controls,onClick:e=>e.preventDefault(),onCanplay:this.handleCanplay,onLoadedmetadata:this.handleLoadedmetadata,onTimeupdate:this.handleTimeupdate,onEnded:this.handlePlayEnded},"Your browser is too old which doesn't support HTML5 video."),this.loadMetaData&&React.createElement(W,{class:"meta-data-loading"}))}}),q=Object.assign(g,{install:e=>{e.component(g.name,g)}});module.exports=q;
+"use strict";const n=require("vue"),u=require("mpegts.js"),O=Symbol("ArcoConfigProvider"),R="arco",I="$arco",x=e=>{var a,t,s;const c=n.getCurrentInstance(),d=n.inject(O,void 0),i=(s=(t=d==null?void 0:d.prefixCls)!=null?t:(a=c==null?void 0:c.appContext.config.globalProperties[I])==null?void 0:a.classPrefix)!=null?s:R;return e?`${i}-${e}`:i},z=Object.prototype.toString;function D(e){return z.call(e)==="[object Number]"&&e===e}var V=(e,a)=>{for(const[t,s]of a)e[t]=s;return e};const F=n.defineComponent({name:"IconLoading",props:{size:{type:[Number,String]},strokeWidth:{type:Number,default:4},strokeLinecap:{type:String,default:"butt",validator:e=>["butt","round","square"].includes(e)},strokeLinejoin:{type:String,default:"miter",validator:e=>["arcs","bevel","miter","miter-clip","round"].includes(e)},rotate:Number,spin:Boolean},emits:{click:e=>!0},setup(e,{emit:a}){const t=x("icon"),s=n.computed(()=>[t,`${t}-loading`,{[`${t}-spin`]:e.spin}]),c=n.computed(()=>{const i={};return e.size&&(i.fontSize=D(e.size)?`${e.size}px`:e.size),e.rotate&&(i.transform=`rotate(${e.rotate}deg)`),i});return{cls:s,innerStyle:c,onClick:i=>{a("click",i)}}}}),j=["stroke-width","stroke-linecap","stroke-linejoin"],A=n.createElementVNode("path",{d:"M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6"},null,-1),U=[A];function G(e,a,t,s,c,d){return n.openBlock(),n.createElementBlock("svg",{viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor",class:n.normalizeClass(e.cls),style:n.normalizeStyle(e.innerStyle),"stroke-width":e.strokeWidth,"stroke-linecap":e.strokeLinecap,"stroke-linejoin":e.strokeLinejoin,onClick:a[0]||(a[0]=(...i)=>e.onClick&&e.onClick(...i))},U,14,j)}var y=V(F,[["render",G]]);const W=Object.assign(y,{install:(e,a)=>{var t;const s=(t=a==null?void 0:a.iconPrefix)!=null?t:"";e.component(s+y.name,y)}});const p=n.defineComponent({name:"MpegtsPlayer",props:{videoUrl:{type:String,default:""},closeVisibilityChangeListener:{type:Boolean,default:!1},autoVisibilityChangeRefresh:{type:Boolean,default:!1},autoReload:{type:Boolean,default:!1},isLive:{type:Boolean,default:!0},controls:{type:Boolean,default:!1},currentTime:{type:Number,default:0},stallTimeout:{type:Number,default:5e3}},emits:["loadError","playSuccess","loadComplete","visibilitychange","timeupdate","playEnded","playLoading"],setup(e,{emit:a}){const t=n.ref(null),s=n.ref(null),c=n.ref(!0),d=n.ref(!1),i=n.ref(0);let g=0,m=Date.now();const h=()=>{const o=s.value;t.value=u.createPlayer({type:"flv",isLive:e.isLive,hasAudio:!1,cors:!0,url:e.videoUrl},{enableWorker:!1,enableWorkerForMSE:!1,enableStashBuffer:!e.isLive,stashInitialSize:128,lazyLoad:!1,lazyLoadMaxDuration:.2,deferLoadAfterSourceOpen:!1,liveBufferLatencyChasing:!!e.isLive,liveBufferLatencyMaxLatency:1,liveBufferLatencyMinRemain:.5,autoCleanupSourceBuffer:!0,autoCleanupMinBackwardDuration:30,autoCleanupMaxBackwardDuration:60}),t.value.attachMediaElement(o),c.value=!0,E(),S()},E=async()=>{try{t.value.load()}catch(o){console.log(o),a("loadError",o)}},S=()=>{t.value.on(u.Events.ERROR,L),t.value.on(u.Events.LOADING_COMPLETE,C),t.value.on(u.Events.STATISTICS_INFO,P)},L=(o,l,r)=>{console.log(`类型:${JSON.stringify(o)}`,`报错内容${l}`,"报错信息",r),a("loadError",l)},C=(o,l,r)=>{console.log(`类型:${JSON.stringify(o)}`,`报错内容${l}`,"报错信息",r),console.log("直播已结束"),a("loadComplete"),e.autoReload&&M()},P=o=>{const l=o.decodedFrames,r=Date.now();l===g&&l!==0?r-m>e.stallTimeout&&(console.log(`解码帧数超过 ${e.stallTimeout/1e3} 秒没有更新，可能卡顿了`),a("playLoading")):(g=l,m=r)},M=()=>{console.log("自动加载",i.value),i.value++,i.value<=2?v():i.value=0},v=()=>{t.value!=null&&f(),h()},$=()=>t.value.play(),N=()=>t.value.pause(),f=()=>{var o,l,r,k;t.value&&(t.value.off(u.Events.ERROR,L),t.value.off(u.Events.LOADING_COMPLETE,C),(o=t.value)==null||o.pause(),(l=t.value)==null||l.unload(),(r=t.value)==null||r.detachMediaElement(),(k=t.value)==null||k.destroy(),t.value=null)},T=async o=>{var l;if(!(!((l=o.target)!=null&&l.paused)||!c.value)){c.value=!1,console.log("handleCanplay",o.target.paused),i.value=0,d.value=!1;try{await t.value.play(),console.log(t.value),a("playSuccess")}catch(r){console.log("play error",r),a("loadError",r)}}},B=()=>{d.value=!0},_=o=>{var l;a("timeupdate",((l=o==null?void 0:o.target)==null?void 0:l.currentTime)??0)},w=()=>{a("playEnded")},b=()=>{document.visibilityState==="visible"?(a("visibilitychange",document.visibilityState),e.autoVisibilityChangeRefresh&&v()):f()};return n.watch(()=>e.videoUrl,o=>{o&&n.nextTick(()=>{t.value!=null&&f(),console.log(`isSupported: ${u.isSupported()}`),console.log(`是否支持点播视频：${u.getFeatureList().msePlayback}`),console.log(`是否支持httpflv直播流：${u.getFeatureList().mseLivePlayback}`),h()})},{immediate:!0}),n.onMounted(()=>{e.closeVisibilityChangeListener||document.addEventListener("visibilitychange",b)}),n.onUnmounted(()=>{f(),e.closeVisibilityChangeListener||document.removeEventListener("visibilitychange",b)}),{flvPlayer:t,videoContainerRef:s,loadMetaData:d,start:$,pause:N,destroy:f,reload:v,handleCanplay:T,handleLoadedmetadata:B,handleTimeupdate:_,handlePlayEnded:w}},render(){return n.createVNode("div",{class:"mpegts-player-container"},[n.createVNode("video",{class:"mpegts-player-video-container",ref:"videoContainerRef",muted:!0,controls:this.controls,onClick:e=>e.preventDefault(),onCanplay:this.handleCanplay,onLoadedmetadata:this.handleLoadedmetadata,onTimeupdate:this.handleTimeupdate,onEnded:this.handlePlayEnded},[n.createTextVNode("Your browser is too old which doesn't support HTML5 video.")]),this.loadMetaData&&n.createVNode(W,{class:"mpegts-player-loading"},null)])}}),q=Object.assign(p,{install:e=>{e.component(p.name,p)}});module.exports=q;

package/dist/index.mjs

@@ -1,19 +1,19 @@
-import { getCurrentInstance as N, inject as x, defineComponent as S, computed as k, openBlock as z, createElementBlock as D, normalizeClass as F, normalizeStyle as j, createElementVNode as A, ref as f, watch as V, nextTick as U, onMounted as G, onUnmounted as W } from "vue";
+import { getCurrentInstance as x, inject as z, defineComponent as P, computed as S, openBlock as D, createElementBlock as F, normalizeClass as j, normalizeStyle as A, createElementVNode as V, ref as f, watch as U, nextTick as G, onMounted as W, onUnmounted as J, createVNode as y, createTextVNode as q } from "vue";
 import c from "mpegts.js";
-const J = Symbol("ArcoConfigProvider"), q = "arco", H = "$arco", K = (e) => {
+const H = Symbol("ArcoConfigProvider"), K = "arco", X = "$arco", Y = (e) => {
   var a, t, i;
-  const r = N(), u = x(J, void 0), l = (i = (t = u == null ? void 0 : u.prefixCls) != null ? t : (a = r == null ? void 0 : r.appContext.config.globalProperties[H]) == null ? void 0 : a.classPrefix) != null ? i : q;
+  const r = x(), u = z(H, void 0), l = (i = (t = u == null ? void 0 : u.prefixCls) != null ? t : (a = r == null ? void 0 : r.appContext.config.globalProperties[X]) == null ? void 0 : a.classPrefix) != null ? i : K;
   return e ? `${l}-${e}` : l;
-}, X = Object.prototype.toString;
-function Y(e) {
-  return X.call(e) === "[object Number]" && e === e;
+}, Q = Object.prototype.toString;
+function Z(e) {
+  return Q.call(e) === "[object Number]" && e === e;
 }
-var Q = (e, a) => {
+var ee = (e, a) => {
   for (const [t, i] of a)
     e[t] = i;
   return e;
 };
-const Z = S({
+const te = P({
   name: "IconLoading",
   props: {
     size: {
@@ -40,9 +40,9 @@ const Z = S({
     click: (e) => !0
   },
   setup(e, { emit: a }) {
-    const t = K("icon"), i = k(() => [t, `${t}-loading`, { [`${t}-spin`]: e.spin }]), r = k(() => {
+    const t = Y("icon"), i = S(() => [t, `${t}-loading`, { [`${t}-spin`]: e.spin }]), r = S(() => {
       const l = {};
-      return e.size && (l.fontSize = Y(e.size) ? `${e.size}px` : e.size), e.rotate && (l.transform = `rotate(${e.rotate}deg)`), l;
+      return e.size && (l.fontSize = Z(e.size) ? `${e.size}px` : e.size), e.rotate && (l.transform = `rotate(${e.rotate}deg)`), l;
     });
     return {
       cls: i,
@@ -52,32 +52,32 @@ const Z = S({
       }
     };
   }
-}), ee = ["stroke-width", "stroke-linecap", "stroke-linejoin"], te = /* @__PURE__ */ A("path", { d: "M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6" }, null, -1), ae = [
-  te
+}), ae = ["stroke-width", "stroke-linecap", "stroke-linejoin"], ne = /* @__PURE__ */ V("path", { d: "M42 24c0 9.941-8.059 18-18 18S6 33.941 6 24 14.059 6 24 6" }, null, -1), oe = [
+  ne
 ];
-function ne(e, a, t, i, r, u) {
-  return z(), D("svg", {
+function le(e, a, t, i, r, u) {
+  return D(), F("svg", {
     viewBox: "0 0 48 48",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     stroke: "currentColor",
-    class: F(e.cls),
-    style: j(e.innerStyle),
+    class: j(e.cls),
+    style: A(e.innerStyle),
     "stroke-width": e.strokeWidth,
     "stroke-linecap": e.strokeLinecap,
     "stroke-linejoin": e.strokeLinejoin,
     onClick: a[0] || (a[0] = (...l) => e.onClick && e.onClick(...l))
-  }, ae, 14, ee);
+  }, oe, 14, ae);
 }
-var y = /* @__PURE__ */ Q(Z, [["render", ne]]);
-const oe = Object.assign(y, {
+var p = /* @__PURE__ */ ee(te, [["render", le]]);
+const ie = Object.assign(p, {
   install: (e, a) => {
     var t;
     const i = (t = a == null ? void 0 : a.iconPrefix) != null ? t : "";
-    e.component(i + y.name, y);
+    e.component(i + p.name, p);
   }
 });
-const m = S({
+const g = /* @__PURE__ */ P({
   name: "MpegtsPlayer",
   props: {
     videoUrl: {
@@ -113,95 +113,76 @@ const m = S({
       default: 5e3
     }
   },
-  emits: [
-    "loadError",
-    "playSuccess",
-    "loadComplete",
-    "visibilitychange",
-    "timeupdate",
-    "playEnded",
-    "playLoading"
-  ],
-  setup(e, { emit: a }) {
+  emits: ["loadError", "playSuccess", "loadComplete", "visibilitychange", "timeupdate", "playEnded", "playLoading"],
+  setup(e, {
+    emit: a
+  }) {
     const t = f(null), i = f(null), r = f(!0), u = f(!1), l = f(0);
-    let g = 0, p = Date.now();
-    const h = () => {
+    let m = 0, h = Date.now();
+    const L = () => {
       const n = i.value;
-      t.value = c.createPlayer(
-        {
-          type: "flv",
-          // 指定视频类型
-          isLive: e.isLive,
-          // 开启直播
-          hasAudio: !1,
-          // 关闭声音
-          cors: !0,
-          // 开启跨域访问
-          url: e.videoUrl
-          // 指定流链接
-        },
-        {
-          enableWorker: !1,
-          // 启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
-          // @ts-ignore
-          enableWorkerForMSE: !1,
-          enableStashBuffer: !e.isLive,
-          // 关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
-          stashInitialSize: 128,
-          // 减少首帧等待时长（针对实时视频流）
-          lazyLoad: !1,
-          // 关闭懒加载模式（针对实时视频流）
-          lazyLoadMaxDuration: 0.2,
-          // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
-          deferLoadAfterSourceOpen: !1,
-          // 在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
-          liveBufferLatencyChasing: !!e.isLive,
-          // 追踪内部缓冲区导致的实时流延迟
-          liveBufferLatencyMaxLatency: 1,
-          // HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
-          liveBufferLatencyMinRemain: 0.5,
-          // HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
-          autoCleanupSourceBuffer: !0,
-          // 自动清理SourceBuffer，防止缓冲区溢出。
-          autoCleanupMinBackwardDuration: 30,
-          // 自动清理时保留的最小回溯时长。
-          autoCleanupMaxBackwardDuration: 60
-          // 自动清理时的最大回溯时长。
-        }
-      ), t.value.attachMediaElement(n), r.value = !0, P(), M();
-    }, P = async () => {
+      t.value = c.createPlayer({
+        type: "flv",
+        // 指定视频类型
+        isLive: e.isLive,
+        // 开启直播
+        hasAudio: !1,
+        // 关闭声音
+        cors: !0,
+        // 开启跨域访问
+        url: e.videoUrl
+        // 指定流链接
+      }, {
+        enableWorker: !1,
+        // 启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
+        // @ts-ignore
+        enableWorkerForMSE: !1,
+        enableStashBuffer: !e.isLive,
+        // 关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
+        stashInitialSize: 128,
+        // 减少首帧等待时长（针对实时视频流）
+        lazyLoad: !1,
+        // 关闭懒加载模式（针对实时视频流）
+        lazyLoadMaxDuration: 0.2,
+        // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
+        deferLoadAfterSourceOpen: !1,
+        // 在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
+        liveBufferLatencyChasing: !!e.isLive,
+        // 追踪内部缓冲区导致的实时流延迟
+        liveBufferLatencyMaxLatency: 1,
+        // HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
+        liveBufferLatencyMinRemain: 0.5,
+        // HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
+        autoCleanupSourceBuffer: !0,
+        // 自动清理SourceBuffer，防止缓冲区溢出。
+        autoCleanupMinBackwardDuration: 30,
+        // 自动清理时保留的最小回溯时长。
+        autoCleanupMaxBackwardDuration: 60
+        // 自动清理时的最大回溯时长。
+      }), t.value.attachMediaElement(n), r.value = !0, M(), $();
+    }, M = async () => {
       try {
         t.value.load();
       } catch (n) {
         console.log(n), a("loadError", n);
       }
-    }, M = () => {
-      t.value.on(c.Events.ERROR, L), t.value.on(c.Events.LOADING_COMPLETE, C), t.value.on(c.Events.STATISTICS_INFO, $);
-    }, L = (n, o, s) => {
-      console.log(
-        `类型:${JSON.stringify(n)}`,
-        `报错内容${o}`,
-        "报错信息",
-        s
-      ), a("loadError", o);
+    }, $ = () => {
+      t.value.on(c.Events.ERROR, C), t.value.on(c.Events.LOADING_COMPLETE, b), t.value.on(c.Events.STATISTICS_INFO, T);
     }, C = (n, o, s) => {
-      console.log(
-        `类型:${JSON.stringify(n)}`,
-        `报错内容${o}`,
-        "报错信息",
-        s
-      ), console.log("直播已结束"), a("loadComplete"), e.autoReload && R();
-    }, $ = (n) => {
+      console.log(`类型:${JSON.stringify(n)}`, `报错内容${o}`, "报错信息", s), a("loadError", o);
+    }, b = (n, o, s) => {
+      console.log(`类型:${JSON.stringify(n)}`, `报错内容${o}`, "报错信息", s), console.log("直播已结束"), a("loadComplete"), e.autoReload && B();
+    }, T = (n) => {
       const o = n.decodedFrames, s = Date.now();
-      o === g && o !== 0 ? s - p > e.stallTimeout && (console.log(`解码帧数超过 ${e.stallTimeout / 1e3} 秒没有更新，可能卡顿了`), a("playLoading")) : (g = o, p = s);
-    }, R = () => {
+      o === m && o !== 0 ? s - h > e.stallTimeout && (console.log(`解码帧数超过 ${e.stallTimeout / 1e3} 秒没有更新，可能卡顿了`), a("playLoading")) : (m = o, h = s);
+    }, B = () => {
       console.log("自动加载", l.value), l.value++, l.value <= 2 ? v() : l.value = 0;
     }, v = () => {
-      t.value != null && d(), h();
-    }, B = () => t.value.play(), T = () => t.value.pause(), d = () => {
+      t.value != null && d(), L();
+    }, N = () => t.value.play(), _ = () => t.value.pause(), d = () => {
       var n, o, s, E;
-      t.value && (t.value.off(c.Events.ERROR, L), t.value.off(c.Events.LOADING_COMPLETE, C), (n = t.value) == null || n.pause(), (o = t.value) == null || o.unload(), (s = t.value) == null || s.detachMediaElement(), (E = t.value) == null || E.destroy(), t.value = null);
-    }, _ = async (n) => {
+      t.value && (t.value.off(c.Events.ERROR, C), t.value.off(c.Events.LOADING_COMPLETE, b), (n = t.value) == null || n.pause(), (o = t.value) == null || o.unload(), (s = t.value) == null || s.detachMediaElement(), (E = t.value) == null || E.destroy(), t.value = null);
+    }, w = async (n) => {
       var o;
       if (!(!((o = n.target) != null && o.paused) || !r.value)) {
         r.value = !1, console.log("handleCanplay", n.target.paused), l.value = 0, u.value = !1;
@@ -211,64 +192,62 @@ const m = S({
           console.log("play error", s), a("loadError", s);
         }
       }
-    }, w = () => {
+    }, O = () => {
       u.value = !0;
-    }, O = (n) => {
+    }, R = (n) => {
       var o;
       a("timeupdate", ((o = n == null ? void 0 : n.target) == null ? void 0 : o.currentTime) ?? 0);
     }, I = () => {
       a("playEnded");
-    }, b = () => {
+    }, k = () => {
       document.visibilityState === "visible" ? (a("visibilitychange", document.visibilityState), e.autoVisibilityChangeRefresh && v()) : d();
     };
-    return V(
-      () => e.videoUrl,
-      (n) => {
-        n && U(() => {
-          t.value != null && d(), console.log(`isSupported: ${c.isSupported()}`), console.log(`是否支持点播视频：${c.getFeatureList().msePlayback}`), console.log(`是否支持httpflv直播流：${c.getFeatureList().mseLivePlayback}`), h();
-        });
-      },
-      { immediate: !0 }
-    ), G(() => {
-      e.closeVisibilityChangeListener || document.addEventListener("visibilitychange", b);
+    return U(() => e.videoUrl, (n) => {
+      n && G(() => {
+        t.value != null && d(), console.log(`isSupported: ${c.isSupported()}`), console.log(`是否支持点播视频：${c.getFeatureList().msePlayback}`), console.log(`是否支持httpflv直播流：${c.getFeatureList().mseLivePlayback}`), L();
+      });
+    }, {
+      immediate: !0
     }), W(() => {
-      d(), e.closeVisibilityChangeListener || document.removeEventListener("visibilitychange", b);
+      e.closeVisibilityChangeListener || document.addEventListener("visibilitychange", k);
+    }), J(() => {
+      d(), e.closeVisibilityChangeListener || document.removeEventListener("visibilitychange", k);
     }), {
       flvPlayer: t,
       videoContainerRef: i,
       loadMetaData: u,
-      start: B,
-      pause: T,
+      start: N,
+      pause: _,
       destroy: d,
       reload: v,
-      handleCanplay: _,
-      handleLoadedmetadata: w,
-      handleTimeupdate: O,
+      handleCanplay: w,
+      handleLoadedmetadata: O,
+      handleTimeupdate: R,
       handlePlayEnded: I
     };
   },
   render() {
-    return /* @__PURE__ */ React.createElement("div", { class: "mainContainer" }, /* @__PURE__ */ React.createElement(
-      "video",
-      {
-        class: "video-container",
-        ref: "videoContainerRef",
-        muted: !0,
-        controls: this.controls,
-        onClick: (e) => e.preventDefault(),
-        onCanplay: this.handleCanplay,
-        onLoadedmetadata: this.handleLoadedmetadata,
-        onTimeupdate: this.handleTimeupdate,
-        onEnded: this.handlePlayEnded
-      },
-      "Your browser is too old which doesn't support HTML5 video."
-    ), this.loadMetaData && /* @__PURE__ */ React.createElement(oe, { class: "meta-data-loading" }));
+    return y("div", {
+      class: "mpegts-player-container"
+    }, [y("video", {
+      class: "mpegts-player-video-container",
+      ref: "videoContainerRef",
+      muted: !0,
+      controls: this.controls,
+      onClick: (e) => e.preventDefault(),
+      onCanplay: this.handleCanplay,
+      onLoadedmetadata: this.handleLoadedmetadata,
+      onTimeupdate: this.handleTimeupdate,
+      onEnded: this.handlePlayEnded
+    }, [q("Your browser is too old which doesn't support HTML5 video.")]), this.loadMetaData && y(ie, {
+      class: "mpegts-player-loading"
+    }, null)]);
   }
-}), se = Object.assign(m, {
+}), ce = Object.assign(g, {
   install: (e) => {
-    e.component(m.name, m);
+    e.component(g.name, g);
   }
 });
 export {
-  se as default
+  ce as default
 };

package/dist/style.css

@@ -1 +1 @@
-.mainContainer{display:block;width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative}.meta-data-loading{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;font-size:40px;color:rgb(var(--primary-6))}.video-container{width:100%;height:100%}
+.mpegts-player-container{display:block;width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative}.mpegts-player-loading{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;font-size:40px;color:rgb(var(--primary-6))}.mpegts-player-video-container{width:100%;height:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linker-design-plus/mpegtsplayer",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A player base on mpegts.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -43,6 +43,8 @@
     "@types/node": "^18.0.0",
     "rimraf": "^5.0.0",
     "typescript": "^5.0.0",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0"
   }
-}
+}

package/src/MpegtsPlayer.less

@@ -1,4 +1,4 @@
-.mainContainer {
+.mpegts-player-container {
   display: block;
   width: 100%;
   height: 100%;
@@ -7,7 +7,7 @@
   position: relative;
 }
 
-.meta-data-loading {
+.mpegts-player-loading {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -17,7 +17,7 @@
   color: rgb(var(--primary-6));
 }
 
-.video-container {
+.mpegts-player-video-container {
   width: 100%;
   height: 100%;
 }