ng-cw-v12
Version:
Angular UI Component Library
295 lines (285 loc) • 18.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('jessibuca-js')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/video-flv', ['exports', '@angular/core', '@angular/common', 'jessibuca-js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["video-flv"] = {}), global.ng.core, global.ng.common, global.Jessibuca));
})(this, (function (exports, i0, i1, Jessibuca) { 'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
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 Jessibuca__default = /*#__PURE__*/_interopDefaultLegacy(Jessibuca);
var VideoFlvComponent = /** @class */ (function () {
function VideoFlvComponent() {
this.playError = false;
this.playTimeout = false;
/** 返回Jessibuca */
this.ncLoaded = new i0.EventEmitter();
/** 返回播放状态 */
this.ncPlaying = new i0.EventEmitter();
/** 视频地址 */
this.ncUrl = '';
/** 超时 */
this.ncTimeout = 8;
/** 加载中文案 */
this.ncLoadingText = '加载中...';
/** 播放失败文案 */
this.ncErrorText = '播放失败';
/** 播放超时文案 */
this.ncTimeoutText = '播放超时，视频源无响应';
/** 静音 */
this._muted = true;
/** 自动播放 */
this._autoplay = false;
/** 铺满 */
this._fill = false;
/** 截图 */
this._screenshot = false;
/** 录屏 */
this._record = false;
/** 网速 */
this._bandwidth = false;
/** 隐藏控制栏 */
this._controls = true;
}
Object.defineProperty(VideoFlvComponent.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(VideoFlvComponent.prototype, "ncAutoplay", {
get: function () {
return this._autoplay;
},
set: function (value) {
this._autoplay = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoFlvComponent.prototype, "ncFill", {
get: function () {
return this._fill;
},
set: function (value) {
this._fill = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoFlvComponent.prototype, "ncScreenshot", {
get: function () {
return this._screenshot;
},
set: function (value) {
this._screenshot = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoFlvComponent.prototype, "ncRecord", {
get: function () {
return this._record;
},
set: function (value) {
this._record = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoFlvComponent.prototype, "ncBandwidth", {
get: function () {
return this._bandwidth;
},
set: function (value) {
this._bandwidth = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoFlvComponent.prototype, "ncControls", {
get: function () {
return this._controls;
},
set: function (value) {
this._controls = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
VideoFlvComponent.prototype.ngOnDestroy = function () {
this.destroy();
};
VideoFlvComponent.prototype.ngAfterViewInit = function () {
if (this.ncUrl) {
this.init();
}
};
VideoFlvComponent.prototype.ngOnChanges = function (changes) {
if (changes['ncUrl'] && changes['ncUrl'].currentValue && !changes['ncUrl'].firstChange) {
this.init();
}
};
VideoFlvComponent.prototype.init = function () {
var _this = this;
this.destroy();
this.playError = false;
this.playTimeout = false;
//这里加延迟是因为destroy后直接重新new的话会报Jessibuca container has been created and can not be created again
setTimeout(function () {
_this.jessibuca = new Jessibuca__default["default"]({
url: _this.ncUrl,
decoder: 'assets/jessibuca-js/decoder.js',
container: _this.videoContainer.nativeElement,
videoBuffer: 0.2,
isResize: !_this.ncFill,
loadingText: _this.ncLoadingText,
debug: false,
timeout: _this.ncTimeout,
showBandwidth: _this.ncBandwidth,
operateBtns: {
fullscreen: true,
screenshot: _this.ncScreenshot,
play: true,
audio: true,
record: _this.ncRecord //录制按钮
},
isNotMute: false,
controlAutoHide: true //自动隐藏控制栏
});
if (!_this.ncControls) {
var controls = _this.videoContainer.nativeElement.querySelector('.jessibuca-controls');
controls === null || controls === void 0 ? void 0 : controls.remove();
}
//错误监听
_this.jessibuca.on("error", function (error) {
console.error('error:', error);
_this.playError = true;
});
//超时监听
_this.jessibuca.on("timeout", function (error) {
console.error('timeout:', error);
_this.playTimeout = true;
});
//播放监听
_this.jessibuca.on("play", function () {
_this.ncPlaying.emit(true);
});
//暂停监听
_this.jessibuca.on("pause", function () {
_this.ncPlaying.emit(false);
});
_this.jessibuca.on("load", function () {
//自动播放
if (_this.ncAutoplay) {
_this.jessibuca.play();
}
//开启声音
if (!_this.ncMuted) {
_this.jessibuca.cancelMute();
}
//返回对象
_this.ncLoaded.emit(_this.jessibuca);
});
}, 100);
};
VideoFlvComponent.prototype.destroy = function () {
if (this.jessibuca) {
this.jessibuca.destroy();
}
};
return VideoFlvComponent;
}());
VideoFlvComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoFlvComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
VideoFlvComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VideoFlvComponent, selector: "nc-video-flv", inputs: { ncUrl: "ncUrl", ncTimeout: "ncTimeout", ncLoadingText: "ncLoadingText", ncErrorText: "ncErrorText", ncTimeoutText: "ncTimeoutText", ncMuted: "ncMuted", ncAutoplay: "ncAutoplay", ncFill: "ncFill", ncScreenshot: "ncScreenshot", ncRecord: "ncRecord", ncBandwidth: "ncBandwidth", ncControls: "ncControls" }, outputs: { ncLoaded: "ncLoaded", ncPlaying: "ncPlaying" }, viewQueries: [{ propertyName: "videoContainer", first: true, predicate: ["videoContainer"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"video-container\">\r\n <div class=\"playError\" *ngIf=\"playError\">\r\n <svg t=\"1724830569178\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"10496\" width=\"64\" height=\"64\">\r\n <path\r\n d=\"M725.333333 469.333333c129.6 0 234.666667 105.066667 234.666667 234.666667s-105.066667 234.666667-234.666667 234.666667-234.666667-105.066667-234.666666-234.666667 105.066667-234.666667 234.666666-234.666667z m128-341.333333a128 128 0 0 1 128 128v294.101333a300.224 300.224 0 0 0-85.312-91.221333L896 426.666667h-59.605333c-34.346667-13.76-71.808-21.333333-111.061334-21.333334v-192H298.666667v597.333334h147.626666a298.453333 298.453333 0 0 0 50.282667 85.354666L170.666667 896a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h682.666666z m-119.466666 661.333333h-17.066667a21.333333 21.333333 0 0 0-21.333333 21.333334v17.066666a21.333333 21.333333 0 0 0 21.333333 21.333334h17.066667a21.333333 21.333333 0 0 0 21.333333-21.333334V810.666667a21.333333 21.333333 0 0 0-21.333333-21.333334zM213.333333 682.666667H128v85.333333a42.666667 42.666667 0 0 0 39.466667 42.56L170.666667 810.666667h42.666666v-128z m520.533334-128h-17.066667a21.333333 21.333333 0 0 0-21.184 18.837333L695.466667 576v149.333333a21.333333 21.333333 0 0 0 18.837333 21.184L716.8 746.666667h17.066667a21.333333 21.333333 0 0 0 21.184-18.837334L755.2 725.333333v-149.333333a21.333333 21.333333 0 0 0-21.333333-21.333333z m-266.026667-187.114667l2.773333 1.6 114.090667 71.296a298.965333 298.965333 0 0 0-154.432 217.002667 42.24 42.24 0 0 1-24.832-35.584L405.333333 618.666667V405.333333c0-32.426667 34.517333-52.608 62.506667-37.781333zM213.333333 426.666667H128v170.666666h85.333333v-170.666666z m0-213.333334H170.666667a42.666667 42.666667 0 0 0-42.56 39.466667L128 256v85.333333h85.333333v-128z m640 0h-42.666666v128h85.333333v-85.333333a42.666667 42.666667 0 0 0-39.466667-42.56L853.333333 213.333333z\"\r\n fill=\"#cdcdcd\" p-id=\"10497\"></path>\r\n </svg>\r\n <div class=\"errorText\">{{ncErrorText}}</div>\r\n </div>\r\n <div class=\"playTimeout\" *ngIf=\"playTimeout\">\r\n <svg t=\"1770556919745\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n p-id=\"3373\" width=\"64\" height=\"64\">\r\n <path\r\n d=\"M730.3168 487.7824a242.5344 242.5344 0 1 1 0.0512 485.0688 242.5344 242.5344 0 0 1 0-485.0688z m4.864 58.2144a188.2112 188.2112 0 0 0-133.7856 55.3984 188.1088 188.1088 0 0 0-55.3984 133.7856 188.2112 188.2112 0 0 0 55.3984 133.7856 188.1088 188.1088 0 0 0 133.7856 55.3984 188.2112 188.2112 0 0 0 133.7856-55.3984 188.3136 188.3136 0 0 0 55.3984-133.7856 188.2112 188.2112 0 0 0-55.3984-133.7856 188.1088 188.1088 0 0 0-133.7856-55.3984zM799.5904 51.2a125.3376 125.3376 0 0 1 124.6208 116.8896l0.256 7.8848v329.472a291.84 291.84 0 0 0-62.0544-43.7248l-0.0512-161.1776-748.8-0.1024V798.72c0 32.1536 24.6784 59.5456 56.0128 62.8224l6.3488 0.3584 297.472-0.1536c12.8 22.9376 28.672 43.9808 47.0016 62.5152H176.0256a125.184 125.184 0 0 1-124.5184-116.8896l-0.2048-7.8848V175.9744a125.184 125.184 0 0 1 116.8896-124.5184L176.0256 51.2h623.5648z m-64 541.2864c13.824 0 22.0672 10.9568 22.0672 20.3776v97.8432h77.3632c9.4208 0 21.4016 10.24 21.4016 25.344s-11.9808 24.576-21.4016 24.576h-87.6544a34.0992 34.0992 0 0 1-34.0992-34.0992v-113.664c0-9.4208 8.5504-20.3776 22.3232-20.3776zM411.8528 378.624c9.5232 0 20.8896 1.9968 30.3616 7.936l136.704 82.7392a290.9184 290.9184 0 0 0-140.9536 280.7808l4.2496-2.3552a53.76 53.76 0 0 1-30.3616 7.9872c-30.3616 0-56.9344-15.872-56.9344-49.664V428.288c0-33.7408 26.5728-49.6128 56.9344-49.6128zM152.1664 118.0672a62.5664 62.5664 0 0 0-38.2976 51.2l-0.3072 6.4v62.7712l1.8432-0.1024h106.1376L152.1664 118.0672z m647.7824-4.7616h-80.4864l72.1408 125.0304h70.7584V175.6672c0-32.1536-24.6784-58.88-56.0128-62.0544l-6.4-0.3072z m-155.3408 0h-88.576l72.0896 125.0304h88.576L644.608 113.3056z m-163.328 0H392.704l72.192 125.0304h88.4736L481.2288 113.3056z m-163.4304 0h-93.696L296.448 238.336h93.5424L317.8496 113.3056z\"\r\n fill=\"#cdcdcd\" p-id=\"3374\"></path>\r\n </svg>\r\n <div class=\"errorText\">{{ncTimeoutText}}</div>\r\n </div>\r\n <div id=\"video-container\" #videoContainer></div>\r\n</div>", styles: ["::ng-deep .video-container{width:100%;height:100%;position:relative;background-color:#0006}::ng-deep .video-container .playError,::ng-deep .video-container .playTimeout{background-color:#000;position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:99}::ng-deep .video-container .playError .errorText,::ng-deep .video-container .playTimeout .errorText{color:#cdcdcd;font-size:16px;margin-top:10px;letter-spacing:1px}::ng-deep .video-container .jessibuca-play-big{display:block}::ng-deep .video-container #video-container{width:100%;height:100%}\n"], directives: [{ type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoFlvComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-video-flv',
templateUrl: './video-flv.component.html',
styleUrls: ['./video-flv.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { videoContainer: [{
type: i0.ViewChild,
args: ['videoContainer']
}], ncLoaded: [{
type: i0.Output
}], ncPlaying: [{
type: i0.Output
}], ncUrl: [{
type: i0.Input
}], ncTimeout: [{
type: i0.Input
}], ncLoadingText: [{
type: i0.Input
}], ncErrorText: [{
type: i0.Input
}], ncTimeoutText: [{
type: i0.Input
}], ncMuted: [{
type: i0.Input
}], ncAutoplay: [{
type: i0.Input
}], ncFill: [{
type: i0.Input
}], ncScreenshot: [{
type: i0.Input
}], ncRecord: [{
type: i0.Input
}], ncBandwidth: [{
type: i0.Input
}], ncControls: [{
type: i0.Input
}] } });
var NcVideoFlvModule = /** @class */ (function () {
function NcVideoFlvModule() {
}
return NcVideoFlvModule;
}());
NcVideoFlvModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoFlvModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcVideoFlvModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoFlvModule, declarations: [VideoFlvComponent], imports: [i1.CommonModule], exports: [VideoFlvComponent] });
NcVideoFlvModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoFlvModule, imports: [[
i1.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoFlvModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
VideoFlvComponent
],
imports: [
i1.CommonModule
],
exports: [
VideoFlvComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcVideoFlvModule = NcVideoFlvModule;
exports.VideoFlvComponent = VideoFlvComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-video-flv.umd.js.map