ng-cw-v12
Version:
Angular UI Component Library
206 lines (197 loc) • 10.7 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('rxjs'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/video-easy', ['exports', '@angular/core', '@angular/common', 'rxjs', '@angular/platform-browser'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["video-easy"] = {}), global.ng.core, global.ng.common, global.rxjs, global.ng.platformBrowser));
})(this, (function (exports, i0, common, rxjs, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var VideoEasyComponent = /** @class */ (function () {
function VideoEasyComponent(eleRef, sanitizer) {
var _this = this;
this.eleRef = eleRef;
this.sanitizer = sanitizer;
/** 返回播放状态 */
this.ncPlaying = new i0.EventEmitter();
/** 返回播放器 */
this.ncLoaded = new i0.EventEmitter();
/** 视频地址 */
this.ncUrl = '';
/** 超时 */
this.ncTimeout = 10;
/** 播放失败文案 */
this.ncErrorText = '播放失败';
/** 播放超时文案 */
this.ncTimeoutText = '播放超时，视频源无响应';
/** 静音 */
this._muted = true;
/** 自动播放 */
this._autoplay = false;
this.messageListener = null;
this.errorSubject = new rxjs.Subject();
this.iframeElement = null;
this.playerController = null;
// 生成唯一ID
this.uniqueId = "video_easy_" + Math.random().toString(36).substring(2, 11);
// 监听消息
this.messageListener = function (event) {
if (event.data && event.data.type === 'iframe-message') {
var eventData = event.data;
//只处理当前视频iframe的消息
//防止一次用几个组件，其中一个iframe发消息，所有组件都收到
if (eventData.uniqueId != _this.uniqueId) {
return;
}
_this.errorSubject.next(eventData);
if (eventData.message == 'play') {
_this.ncPlaying.emit(true);
}
else if (eventData.message == 'pause') {
_this.ncPlaying.emit(false);
}
else if (eventData.message == 'loaded') {
_this.playerController = {
pause: function () {
_this.sendCommandToIframe('pause');
},
play: function (url) {
_this.sendCommandToIframe('play', url);
},
setMute: function (mute) {
_this.sendCommandToIframe('setMute', mute);
},
destroy: function () {
_this.sendCommandToIframe('destroy');
}
};
_this.ncLoaded.emit(_this.playerController);
}
}
};
window.addEventListener('message', this.messageListener);
}
Object.defineProperty(VideoEasyComponent.prototype, "ncMuted", {
get: function () {
return this._muted;
},
set: function (value) {
this._muted = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoEasyComponent.prototype, "ncAutoplay", {
get: function () {
return this._autoplay;
},
set: function (value) {
this._autoplay = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
VideoEasyComponent.prototype.ngAfterViewInit = function () {
// 获取 iframe 元素
var iframe = this.eleRef.nativeElement.querySelector('iframe');
if (iframe) {
this.iframeElement = iframe;
}
};
VideoEasyComponent.prototype.ngOnChanges = function (changes) {
if (changes['ncUrl']) {
this.updateVideoUrl();
}
};
VideoEasyComponent.prototype.ngOnDestroy = function () {
this.sendCommandToIframe('destroy');
};
VideoEasyComponent.prototype.updateVideoUrl = function () {
var iframeUrl = "assets/easyplayer-js/viewer.html?url=" + encodeURIComponent(this.ncUrl) + "&autoplay=" + this.ncAutoplay + "&muted=" + this.ncMuted + "&uniqueId=" + this.uniqueId + "&timeout=" + this.ncTimeout + "&errorText=" + this.ncErrorText + "&timeoutText=" + this.ncTimeoutText;
this.viewerUrl = this.sanitizer.bypassSecurityTrustResourceUrl(iframeUrl);
};
VideoEasyComponent.prototype.sendCommandToIframe = function (command, params) {
if (this.iframeElement && this.iframeElement.contentWindow) {
var message = {
type: 'player-command',
command: command,
params: params
};
this.iframeElement.contentWindow.postMessage(message, '*');
}
};
return VideoEasyComponent;
}());
VideoEasyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoEasyComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace.DomSanitizer }], target: i0__namespace.ɵɵFactoryTarget.Component });
VideoEasyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VideoEasyComponent, selector: "nc-video-easy", inputs: { ncUrl: "ncUrl", ncTimeout: "ncTimeout", ncErrorText: "ncErrorText", ncTimeoutText: "ncTimeoutText", ncMuted: "ncMuted", ncAutoplay: "ncAutoplay" }, outputs: { ncPlaying: "ncPlaying", ncLoaded: "ncLoaded" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"nc-video-easy-container\">\r\n <iframe [src]=\"viewerUrl\" width=\"100%\" height=\"100%\" [attr.frameBorder]=\"0\" style=\"border: none;\">\r\n </iframe>\r\n</div>", styles: [".nc-video-easy-container{position:relative;width:100%;height:100%;overflow:hidden}\n"] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoEasyComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-video-easy',
templateUrl: './video-easy.component.html',
styleUrls: ['./video-easy.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace.DomSanitizer }]; }, propDecorators: { ncPlaying: [{
type: i0.Output
}], ncLoaded: [{
type: i0.Output
}], ncUrl: [{
type: i0.Input
}], ncTimeout: [{
type: i0.Input
}], ncErrorText: [{
type: i0.Input
}], ncTimeoutText: [{
type: i0.Input
}], ncMuted: [{
type: i0.Input
}], ncAutoplay: [{
type: i0.Input
}] } });
var NcVideoEasyModule = /** @class */ (function () {
function NcVideoEasyModule() {
}
return NcVideoEasyModule;
}());
NcVideoEasyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoEasyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcVideoEasyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoEasyModule, declarations: [VideoEasyComponent], imports: [common.CommonModule], exports: [VideoEasyComponent] });
NcVideoEasyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoEasyModule, imports: [[
common.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoEasyModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
VideoEasyComponent
],
imports: [
common.CommonModule
],
exports: [
VideoEasyComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcVideoEasyModule = NcVideoEasyModule;
exports.VideoEasyComponent = VideoEasyComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-video-easy.umd.js.map