hm-ng-video/bundles/hm-ng-video.umd.min.js

（1）引入 npm 包，在==package.json==里面添加：

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("video.js"),require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("hm-ng-video",["exports","video.js","@angular/core","@angular/common"],t):t(e["hm-ng-video"]={},e.videojs,e.ng.core,e.ng.common)}(this,function(e,l,i,t){"use strict";l=l&&l.hasOwnProperty("default")?l["default"]:l;var n=(o.prototype.createDom=function(e){var t,i,n=this;"file"===e?this.fileVideo.nativeElement.innerHTML="<video id='"+this.className+"-fileVideo' class='video-js vjs-big-play-centered'  controls muted preload='none' x-webkit-airplay='true' webkit-playsinline='isiPhoneShowPlaysinline' playsinline='isiPhoneShowPlaysinline' x5-playsinline='true' x5-video-player-type='h5'></video>":(t="<div class='loading "+this.className+"-loading'><img src='"+(this.loadingSrc||"")+"' alt='' ></div>",i="<div class='error "+this.className+"-error'><span>"+(this.errorContent||"")+"</span></div>",this.liveVideo.nativeElement.innerHTML="<video id='"+this.className+"-liveVideo' class='video-js vjs-big-play-centered'  controls muted preload='none' x-webkit-airplay='true' webkit-playsinline='isiPhoneShowPlaysinline' playsinline='isiPhoneShowPlaysinline' x5-playsinline='true' x5-video-player-type='h5'></video>"+t+i,this.el.nativeElement.querySelector("."+this.className+"-error").addEventListener("click",function(){n.setBgVisible("error",!1),n.createLivePlayer(!0)}))},o.prototype.init=function(){var e,t=this;this.liveLoaded=!1,this.fileOptions?(this.createDom("file"),e=this.el.nativeElement.querySelector("#"+this.className+"-fileVideo"),this.filePlayer=l(e,Object.assign(this.fileOptions,{autoplay:this.autoplay,errorDisplay:!1,controlBar:{playToggle:!0,volumePanel:!1,pictureInPictureToggle:!1,fullscreenToggle:!1}})),this.setDefaultProperty(this.filePlayer),this.filePlayer.on("error",function(e){t.ErrorEventListener.emit(e),console.log("文件流出错了！"),t.dispose(t.filePlayer),t.fileOptions=null,t.createLivePlayer(!0,!0)}),this.filePlayer.on("playing",function(e){t.PlayingEventListener.emit(e),t.livePlayer||t.createLivePlayer(!0)}),this.filePlayer.on("pause",function(e){t.PauseEventListener.emit(e)})):this.createLivePlayer()},o.prototype.createLivePlayer=function(e,t){var i,n,o,r=this;this.liveOptions&&(this.createDom("live"),t&&this.setBgVisible("loading",!0),i=this.el.nativeElement.querySelector("#"+this.className+"-liveVideo"),o=n=0,this.livePlayer=l(i,Object.assign(this.liveOptions,{autoplay:e||this.autoplay,errorDisplay:!1,liveui:!0,controlBar:{playToggle:!0,volumePanel:!1,pictureInPictureToggle:!1,fullscreenToggle:!1}})),this.addFullScreen(),this.setDefaultProperty(this.livePlayer),this.livePlayer.on("loadstart",function(e){console.log("直播流开始load"),n=(new Date).getTime(),r.isVideoLoadingTimeout||(r.isVideoLoadingTimeout=setTimeout(function(){r.livePlayer&&3!==r.livePlayer.readyState()&&4!==r.livePlayer.readyState()&&(r.openModal(),r.ErrorEventListener.emit("overtime"),console.log("加载超时！"))},r.maxLoadTime||15e3))}),this.livePlayer.on("loadedmetadata",function(e){o=(new Date).getTime(),console.log("直播流加载成功"),r.setBgVisible("loading",!1),r.DataLoadedEventListener.emit(Object.assign(e,{bufferTime:o-n}))}),this.livePlayer.on("canplaythrough",function(e){3!==r.livePlayer.readyState()&&4!==r.livePlayer.readyState()||(setTimeout(function(){r.filePlayer&&r.dispose(r.filePlayer),r.liveLoaded=!0,r.setBgVisible("loading",!1)},1e3),r.CanPlayEventListener.emit(e)),console.log(r.livePlayer.readyState(),"canplaythrough")}),this.livePlayer.on("playing",function(e){console.log("直播流正在播放！"),r.destroyTimeout(),r.setBgVisible("loading",!1),r.PlayingEventListener.emit(e)}),this.livePlayer.on("error",function(e){r.ErrorEventListener.emit(e),console.log("直播流出错了！"),r.openModal()}),this.livePlayer.on("pause",function(e){r.PauseEventListener.emit(e)}),this.livePlayer.on("timeupdate",function(e){r.isVideoBreak||3!==r.livePlayer.readyState()&&4!==r.livePlayer.readyState()&&(r.WaitingEventListener.emit(e),r.isVideoBreak=setTimeout(function(){r.livePlayer&&3!==r.livePlayer.readyState()&&4!==r.livePlayer.readyState()&&(r.openModal(),r.ErrorEventListener.emit("overtime"),console.log("缓冲超时！"))},r.maxLoadTime||15e3))}))},o.prototype.getFilePlayer=function(){return this.filePlayer||undefined},o.prototype.getLivePlayer=function(){return this.livePlayer||undefined},o.prototype.setDefaultProperty=function(e){e.playsinline(!0)},o.prototype.dispose=function(e){e&&(e.isDisposed()||(e.dispose(),e=undefined))},o.prototype.destroyTimeout=function(){clearTimeout(this.isVideoBreak),clearTimeout(this.isVideoLoadingTimeout),clearInterval(this.fullScreenTimer),this.isVideoBreak=undefined,this.isVideoLoadingTimeout=undefined,this.fullScreenTimer=undefined},o.prototype.destroy=function(){this.destroyTimeout(),this.dispose(this.filePlayer),this.dispose(this.livePlayer)},o.prototype.openModal=function(){this.fileOptions=null,this.destroy(),this.setBgVisible("loading",!1),this.setBgVisible("error",!0)},o.prototype.setBgVisible=function(e,t){var i="loading"===e?this.el.nativeElement.querySelector("."+this.className+"-loading"):this.el.nativeElement.querySelector("."+this.className+"-error");this.renderer.setStyle(i,"display",t?"block":"none")},o.prototype.isIOS=function(){var e=!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);return console.log("ios",e),e},o.prototype.addFullScreen=function(){var t=this,e=l.getComponent("Button");l.registerComponent("FullScreenButton",l.extend(e,{handleClick:function(){if(t.livePlayer.isFullscreen())t.FullScreenToggeleEventListener.emit(!1),t.livePlayer.exitFullscreen();else try{t.toFullScreen(),t.isIOS()&&(t.fullScreenTimer=setInterval(function(){t.livePlayer.isFullscreen()||(t.FullScreenToggeleEventListener.emit(!1),t.destroy(),t.createLivePlayer(!0))},1e3))}catch(e){console.warn(e)}},buildCSSClass:function(){return"my_fullscreen"}})),this.livePlayer.getChild("controlBar").addChild("FullScreenButton",{})},o.prototype.toFullScreen=function(){return this.FullScreenToggeleEventListener.emit(!0),this.livePlayer.requestFullscreen?this.livePlayer.requestFullscreen():this.livePlayer.webkitRequestFullScreen?this.livePlayer.webkitRequestFullScreen():this.livePlayer.mozRequestFullScreen?this.livePlayer.mozRequestFullScreen():this.livePlayer.msRequestFullscreen()},o.prototype.ngOnInit=function(){console.log("hm-ng-video 1.5.6")},o.prototype.ngOnChanges=function(e){var t=this;this.exitFullScreen&&(console.log("按返回键退出全屏"),this.FullScreenToggeleEventListener.emit(!1),this.livePlayer.exitFullscreen()),(e.fileOptions&&e.fileOptions.firstChange&&e.fileOptions.currentValue||e.liveOptions&&e.liveOptions.firstChange&&e.liveOptions.currentValue)&&this.init(),(e.fileOptions&&e.fileOptions.currentValue&&!e.fileOptions.firstChange||e.liveOptions&&e.liveOptions.currentValue&&!e.liveOptions.firstChange)&&(this.destroy(),setTimeout(function(){t.init()},1e3))},o.prototype.ngOnDestroy=function(){this.destroy()},o.decorators=[{type:i.Component,args:[{selector:"hm-ng-video",template:'\x3c!--\r\n * @Descripttion:\r\n * @version:\r\n * @Author: yding\r\n * @Date: 2020-05-08 19:05:06\r\n * @LastEditors: yding\r\n * @LastEditTime: 2020-06-19 10:44:58\r\n--\x3e\r\n\x3c!-- <button\r\n  class="button"\r\n  style="background: red;"\r\n  (click)="fullScreen()"\r\n  value="全屏"\r\n>\r\n  全屏\r\n</button> --\x3e\r\n<div\r\n  class="vjs-video"\r\n  #fileVideoEl\r\n  [ngStyle]="{\r\n    height: videoHeight + \'px\',\r\n    width: videoWidth + \'px\',\r\n    position: \'relative\'\r\n  }"\r\n  [hidden]="(liveLoaded && liveOptions && fileOptions) || !fileOptions"\r\n></div>\r\n<div\r\n  class="vjs-video"\r\n  #liveVideoEl\r\n  [ngStyle]="{\r\n    height: videoHeight + \'px\',\r\n    width: videoWidth + \'px\',\r\n    position: \'relative\'\r\n  }"\r\n  [hidden]="(!liveLoaded && liveOptions && fileOptions) || !liveOptions"\r\n></div>\r\n',encapsulation:i.ViewEncapsulation.None,styles:['.video-js{width:100%;height:100%}.retry:focus,.vjs-big-play-button:focus,video:focus{outline:0}.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button{display:none}.video-js .vjs-big-play-button{font-size:2.5em;line-height:2.3em;height:2.5em;width:2.5em;border-radius:2.5em;background-color:rgba(115,133,159,.5);border-width:.15em;margin-top:-1.25em;margin-left:-1.75em}.vjs-big-play-button .vjs-icon-placeholder{font-size:1.63em}.vjs-progress-control.vjs-control,.vjs-remaining-time.vjs-time-control.vjs-control{display:none}.vjs-loading-spinner{border:none;visibility:visible;border-radius:0}.vjs-waiting .vjs-loading-spinner{-webkit-animation:none!important;animation:none!important}.video-js .vjs-control.vjs-close-button{display:none}.loading{width:100%;height:100%;top:0;left:0;position:absolute;pointer-events:none;z-index:71;background:#000;display:none}.loading img{width:35px;height:35px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.error{width:100%;height:100%;top:0;left:0;position:absolute;background:#000;cursor:pointer;z-index:70;display:none}.error span{display:block;text-align:center;padding-top:30%;color:#fff}.vjs-control-bar>button.my_fullscreen::before{display:block!important;content:"全屏/退出";cursor:pointer}']}]}],o.ctorParameters=function(){return[{type:i.ElementRef},{type:i.Renderer2}]},o.propDecorators={fileVideo:[{type:i.ViewChild,args:["fileVideoEl"]}],liveVideo:[{type:i.ViewChild,args:["liveVideoEl"]}],fileOptions:[{type:i.Input}],liveOptions:[{type:i.Input}],autoplay:[{type:i.Input}],videoHeight:[{type:i.Input}],videoWidth:[{type:i.Input}],className:[{type:i.Input}],loadingSrc:[{type:i.Input}],maxReloadTimes:[{type:i.Input}],errorContent:[{type:i.Input}],maxLoadTime:[{type:i.Input}],exitFullScreen:[{type:i.Input}],PauseEventListener:[{type:i.Output}],PlayingEventListener:[{type:i.Output}],WaitingEventListener:[{type:i.Output}],ErrorEventListener:[{type:i.Output}],DataLoadedEventListener:[{type:i.Output}],CanPlayEventListener:[{type:i.Output}],ReLoadVideoEventListener:[{type:i.Output}],FullScreenToggeleEventListener:[{type:i.Output}]},o);function o(e,t){this.el=e,this.renderer=t,this.PauseEventListener=new i.EventEmitter,this.PlayingEventListener=new i.EventEmitter,this.WaitingEventListener=new i.EventEmitter,this.ErrorEventListener=new i.EventEmitter,this.DataLoadedEventListener=new i.EventEmitter,this.CanPlayEventListener=new i.EventEmitter,this.ReLoadVideoEventListener=new i.EventEmitter,this.FullScreenToggeleEventListener=new i.EventEmitter,this.liveLoaded=!1}var r=(s.decorators=[{type:i.NgModule,args:[{declarations:[n],imports:[t.CommonModule],exports:[n]}]}],s);function s(){}e.HmNgVideoComponent=n,e.HmNgVideoModule=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=hm-ng-video.umd.min.js.map