@linker-design-plus/mpegtsplayer 1.0.2 → 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 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 g=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 p=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,C),t.value.on(u.Events.LOADING_COMPLETE,L),t.value.on(u.Events.STATISTICS_INFO,P)},C=(o,l,r)=>{console.log(`类型:${JSON.stringify(o)}`,`报错内容${l}`,"报错信息",r),a("loadError",l)},L=(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===p&&l!==0?r-m>e.stallTimeout&&(console.log(`解码帧数超过 ${e.stallTimeout/1e3} 秒没有更新，可能卡顿了`),a("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(),N=()=>t.value.pause(),f=()=>{var o,l,r,k;t.value&&(t.value.off(u.Events.ERROR,C),t.value.off(u.Events.LOADING_COMPLETE,L),(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:"mainContainer"},[n.createVNode("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},[n.createTextVNode("Your browser is too old which doesn't support HTML5 video.")]),this.loadMetaData&&n.createVNode(W,{class:"meta-data-loading"},null)])}}),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

@@ -69,15 +69,15 @@ function le(e, a, t, i, r, u) {
     onClick: a[0] || (a[0] = (...l) => e.onClick && e.onClick(...l))
   }, oe, 14, ae);
 }
-var g = /* @__PURE__ */ ee(te, [["render", le]]);
-const ie = Object.assign(g, {
+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 + g.name, g);
+    e.component(i + p.name, p);
   }
 });
-const p = /* @__PURE__ */ P({
+const g = /* @__PURE__ */ P({
   name: "MpegtsPlayer",
   props: {
     videoUrl: {
@@ -228,9 +228,9 @@ const p = /* @__PURE__ */ P({
   },
   render() {
     return y("div", {
-      class: "mainContainer"
+      class: "mpegts-player-container"
     }, [y("video", {
-      class: "video-container",
+      class: "mpegts-player-video-container",
       ref: "videoContainerRef",
       muted: !0,
       controls: this.controls,
@@ -240,12 +240,12 @@ const p = /* @__PURE__ */ P({
       onTimeupdate: this.handleTimeupdate,
       onEnded: this.handlePlayEnded
     }, [q("Your browser is too old which doesn't support HTML5 video.")]), this.loadMetaData && y(ie, {
-      class: "meta-data-loading"
+      class: "mpegts-player-loading"
     }, null)]);
   }
-}), ce = Object.assign(p, {
+}), ce = Object.assign(g, {
   install: (e) => {
-    e.component(p.name, p);
+    e.component(g.name, g);
   }
 });
 export {

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.2",
+  "version": "1.0.3",
   "description": "A player base on mpegts.js",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

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%;
 }