ps-tcplayer/dist/index.umd.cjs

Tencent Cloud Player component with Vue2/Vue3 compatibility

(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue-demi")):typeof define=="function"&&define.amd?define(["exports","vue-demi"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.TcPlayer={},o.VueDemi))})(this,function(o,n){"use strict";function h(e,i){let t=[...e];if(!t.length)return i&&i(),console.log("resouce loaded"),!1;let s=t.shift();if(!s)return h(t,i),!1;s.endsWith(".js")?d(s,()=>{h(t,i)}):s.endsWith(".css")?p(s,()=>{h(t,i)}):(console.warn("no suport resource:",s),h(t,i))}function d(e,i){if(document.querySelector(`script[src="${e}"]`))return console.log(e,":has youle"),i&&i(),!1;var t=document.createElement("script"),s=i||function(){};t.type="text/javascript",t.readyState?t.onreadystatechange=function(){t.readyState=="loaded"||t.readyState=="complete",t.onreadystatechange=null,s(),console.log(t.readyState)}:(t.onload=function(){s()},t.onerror=function(r){s(),console.log(r)}),t.src=e,document.querySelector("body").appendChild(t)}function p(e,i){if(document.querySelector(`link[href="${e}"]`))return console.log(e,":has youle"),i&&i(),!1;var t=document.createElement("link"),s=i||function(){};t.rel="stylesheet",t.readyState?t.onreadystatechange=function(){t.readyState=="loaded"||t.readyState=="complete",t.onreadystatechange=null,s(),console.log(t.readyState)}:(t.onload=function(){s()},t.onerror=function(r){s(),console.log(r)}),t.href=e,document.querySelector("head").appendChild(t)}const c="";window._pursuer=window._pursuer||{};const y=window._pursuer,a={name:"PsTcPlayer",props:{config:{default(){return{}}}},data(){return{id:"",duration:0,currentTime:0,hearttime:2e4,timers:[]}},render(){return n.h("div",{class:"ps-player",style:{width:"100%",height:"100%",position:"relative"}},[n.h("video",{class:"ps-player-container",style:{overflow:"hidden",position:"relative",width:"100%",height:"100%"},attrs:{preload:"auto",playsinline:"","webkit-playsinline":"",tabindex:"1",id:this.id},preload:"auto",playsinline:"","webkit-playsinline":"",tabindex:"1",id:this.id,ref:"playerBox"})])},watch:{config:{handler(e){e&&this._source_loded},deep:!0}},mounted(){if(!window)return!1;this.id=this.getCfPlayerId();let e=[];const i="//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.v4.5.2.min.js",t="//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/tcplayer.min.css",s="//web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/hls.min.0.13.2m.js";window.TCPlayer||(e=[t,s,i]),h(e,()=>{this._source_loded=!0,this.$nextTick(()=>{this.init()})}),this.$playerBox=document,this.$playerBox.addEventListener("keydown",this.onkeydown,!0),this.$playerBox.addEventListener("keyup",this.onkeyup,!0)},beforeDestroy(){this.destroy()},beforeUnmount(){this.destroy()},methods:{getCfPlayerId(){return y.playerCount=y.playerCount?y.playerCount+1:1,this.config&&this.config.id||"player-container-id"},init(){if(!document.querySelector(`#${this.id}`))return console.log(`#${this.id} dom is not found`);const e={width:"686px",height:"450px",reportable:!0};this.initPlayer({...e,...this.config.tconfig||{}})},initPlayer(e){if(this.$player&&this.destroy(),!window.TCPlayer)return!1;this.hearttime=this.config.hearttime||this.hearttime,this.runs(e)},runs(e){this.$player=new TCPlayer(this.id,e),this.$player.on("ready",this.onready),this.$player.on("error",this.onerror),this.$player.on("timeupdate",this.ontimeupdate),this.$player.on("pause",this.onpause),this.$player.on("play",this.onplay),this.$player.on("ended",this.onended),this.$player.on("waiting",this.onwaiting),this.$player.on("snapshoted",this.onsnapshoted),this.$player.on("sourceloaded",this.onsourceloaded),this.$player.getDuration=this.$player.duration,this.$player.getCurrentTime=this.$player.currentTime,this.$player._el=this.$player.el_,this.$player.seek=this.$player.currentTime,this.$player.getStatus=this.$player.getStatus||function(){return this.$player.paused()?"pause":"playing"}.bind(this),this.$player.destroy=this.$player.dispose,this.$player._originalPlaybackRate=this.$player.playbackRate,this.$player.getVolume=this.$player.volume,this.$player.setVolume=this.$player.volume},onsourceloaded(e){const i=e.paramData,t=i.desc,s=i.definition;this.$player.getComponent("QualityComponent").setCurrentQuality(t,s)},onready(){this.onheart(!0),this.$emit("onready",this.$player),this.config.onready&&this.config.onready(this.$player)},onerror(e){this.$emit("onerror",this.$player),this.config.onerror&&this.config.onerror(this.$player)},ontimeupdate(){this.onheart(),this.duration=this.$player.getDuration(),this.currentTime=this.$player.getCurrentTime(),this.$emit("ontimeupdate",this.duration,this.currentTime,this.$player),this.config.ontimeupdate&&this.config.ontimeupdate(this.duration,this.currentTime,this.$player)},onpause(){this.$emit("onpause",this.$player),this.config.onpause&&this.config.onpause(this.$player)},onplay(){this.$emit("onplay",this.$player),this.config.onplay&&this.config.onplay(this.$player)},onended(){this.onheart(!0),this.$emit("onended",this.$player),this.config.onended&&this.config.onended(this.$player)},onnext(){this.$emit("onnext",this.$player),this.config.onnext&&this.config.onnext(this.$player)},onpre(){this.$emit("onpre",this.$player),this.config.onpre&&this.config.onpre(this.$player)},onwaiting(){this.$emit("onwaiting",this.$player),this.config.onwaiting&&this.config.onwaiting(this.$player)},onsnapshoted(e){this.$emit("onsnapshoted",e,this.$player),this.config.onsnapshoted&&this.config.onsnapshoted(e,this.$player)},onheart(e){if(e)return this.$emit("onheart",this.$player),this.config.onheart&&this.config.onheart(this.$player),!1;if(this.onheart_lock)return!1;clearTimeout(this.timers[0]),this.timers[0]=null,this.onheart_lock=!0,this.timers[0]=setTimeout(()=>{this.onheart_lock=!1,this.$emit("onheart",this.$player),this.config.onheart&&this.config.onheart(this.$player)},this.hearttime)},destroy(){this.$player&&(clearTimeout(this.timers[0]||null),this.onheart_lock=!1,this.$player.off("ready",this.onready),this.$player.off("error",this.onerror),this.$player.off("timeupdate",this.ontimeupdate),this.$player.off("pause",this.onpause),this.$player.off("play",this.onplay),this.$player.off("ended",this.onended),this.$player.off("waiting",this.onwaiting),this.$player.off("snapshoted",this.onsnapshoted),this.$player.off("sourceloaded",this.onsourceloaded),this.$player.destroy(),this.$player=null,this.$playerBox.removeEventListener("keydown",this.onkeydown,!1),this.$playerBox.removeEventListener("keyup",this.onkeyup,!1))},getCurrentTime(){return this.$player&&this.$player.getCurrentTime()||0},onkeydown(e){if(!this.$player)return!1;const i=e.target,t=!i.hasAttribute("contenteditable")&&!/INPUT|TEXTAREA/gi.test(i.tagName);(e.keyCode===13||e.keyCode===32)&&t?this.$player.getStatus()==="playing"?this.$player.pause():this.$player.play():(e.keyCode===37||e.keyCode===39)&&t&&(this._keySeekTime=this.getCurrentTime(),e.keyCode===37?this._keySeekTime-=5:this._keySeekTime+=5)},seekTo(e){this.$player&&this.$player.seek(Number(e)||0)},onkeyup(e){if(!this.$player)return!1;const i=e.target,t=!i.hasAttribute("contenteditable")&&!/INPUT|TEXTAREA/gi.test(i.tagName);if(!((e.keyCode===37||e.keyCode===39)&&!t)){if(this.config.notProgress&&e.keyCode===39)return this._keySeekTime=null,!1;if(e.keyCode===37||e.keyCode===39){const s=this.$player.getDuration();this._keySeekTime<=0?this._keySeekTime=0:this._keySeekTime>=s&&(this._keySeekTime=s-5),this.seekTo(this._keySeekTime),this._keySeekTime=null}}}}};let l=null;a.install=function(e,i={}){e.component(a.name,a),l&&(document.body.removeChild(l),l=null);let t=null;if(n.isVue2){const r=e.extend(a);t=new r({propsData:Object.assign(i,{})}).$mount();const u=t.$el;document.body.appendChild(u)}else if(n.isVue3){const r=n.createApp(a,{...i});l=document.createElement("div"),t=r.mount(l),document.body.appendChild(l)}const s=n.isVue2?e.prototype:e.config.globalProperties;s.$tcPlayer=r=>t?(t.initPlayer(r),t.$player):null},Object.defineProperty(o,"version",{enumerable:!0,get:()=>n.version}),o.default=a,o.tcplayer=a,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});