ng-cw-v12
Version:
Angular UI component library
1,218 lines • 85.3 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('hls.js')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/video-hls', ['exports', '@angular/core', '@angular/common', 'hls.js'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["video-hls"] = {}), global.ng.core, global.ng.common, global.Hls));
})(this, (function (exports, i0, i2, Hls) { '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 i2__namespace = /*#__PURE__*/_interopNamespace(i2);
var Hls__default = /*#__PURE__*/_interopDefaultLegacy(Hls);
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function")
throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn)
context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access)
context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done)
throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0)
continue;
if (result === null || typeof result !== "object")
throw new TypeError("Object expected");
if (_ = accept(result.get))
descriptor.get = _;
if (_ = accept(result.set))
descriptor.set = _;
if (_ = accept(result.init))
initializers.push(_);
}
else if (_ = accept(result)) {
if (kind === "field")
initializers.push(_);
else
descriptor[key] = _;
}
}
if (target)
Object.defineProperty(target, contextIn.name, descriptor);
done = true;
}
;
function __runInitializers(thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
}
;
function __propKey(x) {
return typeof x === "symbol" ? x : "".concat(x);
}
;
function __setFunctionName(f, name, prefix) {
if (typeof name === "symbol")
name = name.description ? "[".concat(name.description, "]") : "";
return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
}
;
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function () { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2)
for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar)
ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
function __classPrivateFieldIn(state, receiver) {
if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function"))
throw new TypeError("Cannot use 'in' operator on non-object");
return typeof state === "function" ? receiver === state : state.has(receiver);
}
var LocalService = /** @class */ (function () {
function LocalService() {
}
//格式化时间
LocalService.prototype.durationFormatSubVal = function (val) {
var valStr = val.toString();
if (valStr.length < 2) {
return '0' + valStr;
}
return valStr;
};
//格式化时间
LocalService.prototype.durationText = function (duration) {
if (duration < 0) {
return "Play";
}
var durationSecInt = Math.round(duration);
return this.durationFormatSubVal(Math.floor(durationSecInt / 3600))
+ ":" + this.durationFormatSubVal(Math.floor((durationSecInt % 3600) / 60))
+ ":" + this.durationFormatSubVal(Math.floor(durationSecInt % 60));
};
//加载js
LocalService.prototype.loadScript = function (scriptUrl) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = scriptUrl;
document.body.appendChild(script);
};
// 检查流地址是否可访问
LocalService.prototype.checkStreamUrl = function (url) {
return new Promise(function (resolve, reject) {
fetch(url, {
method: 'get',
mode: 'cors'
}).then(function (res) {
resolve(res.ok);
}).catch(function (err) {
reject(false);
});
});
};
/**
* 获取文件后缀
* @param filename string 文件名
* @returns extension
*/
LocalService.prototype.getFileExtension = function (filename) {
if (!filename) {
return '';
}
var filenameArr = filename.split('.');
if (filenameArr.length == 0) {
return '';
}
else {
var extension = filenameArr.pop();
return extension.toLowerCase();
}
};
return LocalService;
}());
LocalService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LocalService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
LocalService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LocalService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: LocalService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
var VideoHlsComponent = /** @class */ (function () {
function VideoHlsComponent(elementRef, ls) {
var _this = this;
this.elementRef = elementRef;
this.ls = ls;
this.SHOW_LOADING = "loading...";
this.SHOW_DONE = "done.";
this.isH265 = true;
this.isPlaying = false;
this.muteState = true;
this.isFullScreenBtn = false;
this.networkState = 1; //1：加载中 2：视频地址超时 3：视频地址格式错误 4：初始化组件失败 5：成功
this.glplayerId = 'glplayer' + '_' + new Date().getTime() + '_' + Math.random().toString(36).substring(2, 15);
this.initMissileOk = false;
this.fullscreenHandler = null;
this.canvasStyle = {
marginLeft: 0,
marginTop: 0,
width: 0,
height: 0
};
this.resizeObserver = null;
this.resizeDebounceTimer = null;
this.isInitialResize = true;
this.ncUrl = ''; //视频地址
this.ncErrorTime = 8; //视频地址错误检测时间
this.ncResizeWay = 'default';
this.ncPlaying = new i0.EventEmitter(); //返回播放状态
this.ncLoaded = new i0.EventEmitter(); //返回播放器
this.autoplayMode = false;
this.mutedMode = true;
this.controlsMode = true;
this.playError = false;
//重写console.log来捕获所有输出
this.originalConsoleLog = console.log; // 保存原始 console.log
console.log = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
_this.originalConsoleLog.apply(console, args);
var message = args.join(' ');
if (message.includes('onReadyShowDone')) {
_this.originalConsoleLog('检测到missile初始化成功！');
_this.initMissileOk = true;
}
};
// 只在第一次实例化时加载脚本
if (!VideoHlsComponent.h265webjsLoaded) {
this.ls.loadScript('assets/h265webjs-js/h265webjs-v20211104.js');
VideoHlsComponent.h265webjsLoaded = true;
}
}
Object.defineProperty(VideoHlsComponent.prototype, "ncAutoplay", {
//自动播放
set: function (value) {
this.autoplayMode = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoHlsComponent.prototype, "ncMuted", {
//静音
set: function (value) {
this.mutedMode = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(VideoHlsComponent.prototype, "ncControls", {
//隐藏控制栏
set: function (value) {
this.controlsMode = value !== null && value !== undefined && value !== false && value !== 'false';
},
enumerable: false,
configurable: true
});
VideoHlsComponent.prototype.ngOnInit = function () { };
VideoHlsComponent.prototype.ngAfterViewInit = function () {
if (this.ls.getFileExtension(this.ncUrl) !== 'm3u8') {
console.error("视频地址格式错误！仅支持m3u8格式！");
this.networkState = 3;
return;
}
this.waitForPlayerLoad();
};
VideoHlsComponent.prototype.ngOnDestroy = function () {
// 恢复原始的 console.log
if (this.originalConsoleLog) {
console.log = this.originalConsoleLog;
}
// 移除全屏事件监听器
if (this.fullscreenHandler) {
document.removeEventListener('fullscreenchange', this.fullscreenHandler);
this.fullscreenHandler = null;
}
// 清理ResizeObserver
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
// 清理防抖定时器
if (this.resizeDebounceTimer) {
clearTimeout(this.resizeDebounceTimer);
this.resizeDebounceTimer = null;
}
// 重置初始化标志和尺寸记录
this.isInitialResize = true;
//销毁 h265webjs player
try {
if (this.player && typeof this.player.release === 'function') {
this.player.release();
}
}
catch (error) {
console.warn('播放器销毁失败:', error);
}
//销毁 hls.js player
this.destroyAll();
};
//等待265webjs加载完成
VideoHlsComponent.prototype.waitForPlayerLoad = function () {
var _this = this;
if (!window.new265webjs) {
setTimeout(function () {
_this.waitForPlayerLoad();
}, 100);
return;
}
//初始化
this.initPlayer();
// 8秒后通过打印台信息检查missile是否初始化成功
setTimeout(function () {
if (!_this.initMissileOk) {
console.log("missile初始化失败！");
_this.networkState = 4;
}
}, this.ncErrorTime * 1000);
};
//重新加载
VideoHlsComponent.prototype.reload = function () {
this.isInitialResize = true;
this.player.release();
var glplayer = this.elementRef.nativeElement.querySelector('#' + this.glplayerId);
var playerCanvas = glplayer.querySelector('canvas');
playerCanvas.remove();
this.initPlayer();
};
//初始化
VideoHlsComponent.prototype.initPlayer = function () {
return __awaiter(this, void 0, void 0, function () {
var token, isAvailable, error_1, width, height, config, playerObj, playerCont, controllerCont, progressCont, progressContW, cachePts, progressPts, progressVoice, playBtn, showLabel, ptsLabel, coverToast, coverBtn, muteBtn, fullScreenBtn, mediaInfo, playAction;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
// var url = "http://182.140.3.24:9999/rtp/51332300001320000001_51332300001320000001/hls.m3u8";//265 canvas
// var url = "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8";//264 vjs
// var url = "http://pull-demo.volcfcdnrd.com/live/st-4536521_yzmuhevcd.flv";//265
// var url = "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv";//264 flvjs
//检查流地址是否可访问
this.networkState = 1;
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, this.ls.checkStreamUrl(this.ncUrl)];
case 2:
isAvailable = _a.sent();
if (!isAvailable) {
this.networkState = 2;
return [2 /*return*/];
}
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
this.networkState = 2;
return [2 /*return*/];
case 4:
width = this.elementRef.nativeElement.offsetWidth;
height = this.elementRef.nativeElement.offsetHeight;
console.log("width===========>", width);
console.log("height===========>", height);
config = {
player: this.glplayerId,
width: width,
height: height,
token: token,
extInfo: {
coreProbePart: 0.4,
probeSize: 8192
}
};
playerObj = window.new265webjs(this.ncUrl, config);
this.player = playerObj;
//加载missile（如果放在构造函数中加载的话，会产生可能不去加载视频地址导致的初始化失败问题）
if (!VideoHlsComponent.missileLoaded) {
this.ls.loadScript('assets/h265webjs-js/missile.js');
VideoHlsComponent.missileLoaded = true;
}
playerCont = this.elementRef.nativeElement.querySelector('#player-container');
controllerCont = this.elementRef.nativeElement.querySelector('#controller');
progressCont = this.elementRef.nativeElement.querySelector('#progress-contaniner');
progressContW = progressCont.offsetWidth;
cachePts = progressCont.querySelector('#cachePts');
progressPts = progressCont.querySelector('#progressPts');
progressVoice = this.elementRef.nativeElement.querySelector('#progressVoice');
playBtn = this.elementRef.nativeElement.querySelector('#playBtn');
showLabel = this.elementRef.nativeElement.querySelector('#showLabel');
ptsLabel = this.elementRef.nativeElement.querySelector('#ptsLabel');
coverToast = this.elementRef.nativeElement.querySelector('#coverLayer');
coverBtn = this.elementRef.nativeElement.querySelector('#coverLayerBtn');
muteBtn = this.elementRef.nativeElement.querySelector('#muteBtn');
fullScreenBtn = this.elementRef.nativeElement.querySelector('#fullScreenBtn');
mediaInfo = null;
playBtn.disabled = true;
showLabel.textContent = this.SHOW_LOADING;
playerCont.style.width = config.width + 'px';
playerCont.style.height = config.height + 'px';
controllerCont.style.width = config.width + 'px';
playAction = function () {
if (playerObj.isPlaying()) {
console.log("bar pause============>");
playerObj.pause();
_this.isPlaying = false;
coverToast.removeAttribute('hidden');
}
else {
console.log("bar play============>");
playerObj.play();
_this.isPlaying = true;
coverToast.setAttribute('hidden', 'hidden');
}
_this.ncPlaying.emit(_this.isPlaying);
};
playerCont.onmouseover = function () {
if (!_this.controlsMode) {
controllerCont.hidden = true;
}
else {
controllerCont.hidden = false;
}
};
controllerCont.hidden = true; //默认隐藏工具栏，不在html中设置是因为前方需要获取宽度
playerCont.onmouseout = function () {
controllerCont.hidden = true;
};
//播放按钮点击事件
playBtn.onclick = function () {
playAction();
};
//静音按钮点击事件
muteBtn.onclick = function () {
// console.log(playerObj.getVolume());
if (_this.muteState) {
playerObj.setVoice(1.0);
progressVoice.value = 100;
}
else {
playerObj.setVoice(0.0);
progressVoice.value = 0;
}
_this.muteState = !_this.muteState;
};
//全屏按钮点击事件
fullScreenBtn.onclick = function () {
if (!_this.isFullScreenBtn) {
// 设置当前全屏播放器ID
VideoHlsComponent.currentFullscreenPlayerId = _this.glplayerId;
document.documentElement.requestFullscreen();
// 记录canvas的样式用于还原
var glplayer = _this.elementRef.nativeElement.querySelector('#' + _this.glplayerId);
var playerCanvas = glplayer.querySelector('canvas');
if (playerCanvas) {
_this.canvasStyle.marginLeft = parseInt(getComputedStyle(playerCanvas).marginLeft) || 0;
_this.canvasStyle.marginTop = parseInt(getComputedStyle(playerCanvas).marginTop) || 0;
_this.canvasStyle.width = playerCanvas.offsetWidth;
_this.canvasStyle.height = playerCanvas.offsetHeight;
}
}
else {
document.exitFullscreen();
}
};
// 全屏监听
this.fullscreenHandler = function (event) {
// 只处理当前触发全屏的播放器
if (VideoHlsComponent.currentFullscreenPlayerId === _this.glplayerId) {
if (document.fullscreenElement) {
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
_this.updatePlayerSize('fullscreen', screenWidth, screenHeight);
_this.isFullScreenBtn = true;
// 添加全屏时的样式
playerCont.style.position = 'fixed';
playerCont.style.top = '0';
playerCont.style.left = '0';
playerCont.style.zIndex = '10001';
}
else {
_this.updatePlayerSize('normal', config.width, config.height);
_this.isFullScreenBtn = false;
// 退出全屏时清除当前全屏播放器ID
VideoHlsComponent.currentFullscreenPlayerId = null;
// 恢复正常样式
playerCont.style.position = 'relative';
playerCont.style.top = 'auto';
playerCont.style.left = 'auto';
playerCont.style.zIndex = 'auto';
}
}
};
document.addEventListener('fullscreenchange', this.fullscreenHandler);
//进度条点击事件
progressCont.addEventListener('click', function (e) {
showLabel.textContent = _this.SHOW_LOADING;
var x = e.pageX - progressCont.getBoundingClientRect().left; // or e.offsetX (less support, though)
var y = e.pageY - progressCont.getBoundingClientRect().top; // or e.offsetY
var clickedValue = x * progressCont.max / progressCont.offsetWidth;
playerObj.seek(clickedValue);
});
//进度条音量点击事件
progressVoice.addEventListener('click', function (e) {
var x = e.pageX - progressVoice.getBoundingClientRect().left; // or e.offsetX (less support, though)
var y = e.pageY - progressVoice.getBoundingClientRect().top; // or e.offsetY
var clickedValue = x * progressVoice.max / progressVoice.offsetWidth;
progressVoice.value = clickedValue;
var volume = clickedValue / 100;
playerObj.setVoice(volume);
_this.muteState = volume == 0;
});
//进度条开始拖拽事件
playerObj.onSeekStart = function (pts) {
showLabel.textContent = _this.SHOW_LOADING + " seek to:" + parseInt(pts);
};
//进度条结束拖拽事件
playerObj.onSeekFinish = function () {
showLabel.textContent = _this.SHOW_DONE;
};
//播放结束事件
playerObj.onPlayFinish = function () {
console.log("============= FINISHED ===============");
_this.isPlaying = false;
};
//渲染事件
playerObj.onRender = function (width, height, imageBufferY, imageBufferB, imageBufferR) {
console.log("on render");
};
//打开全屏事件
playerObj.onOpenFullScreen = function () {
console.log("onOpenFullScreen");
};
//关闭全屏事件
playerObj.onCloseFullScreen = function () {
console.log("onCloseFullScreen");
};
//进度条结束拖拽事件
playerObj.onSeekFinish = function () {
showLabel.textContent = _this.SHOW_DONE;
};
//加载缓存事件
playerObj.onLoadCache = function () {
showLabel.textContent = "Caching...";
};
//加载缓存完成事件
playerObj.onLoadCacheFinshed = function () {
showLabel.textContent = _this.SHOW_DONE;
};
//准备完成事件
playerObj.onReadyShowDone = function () {
console.log("onReadyShowDone");
showLabel.textContent = "Cover Img OK";
_this.networkState = 5;
};
//加载完成事件
playerObj.onLoadFinish = function () {
mediaInfo = playerObj.mediaInfo();
console.log("mediaInfo===========>", mediaInfo);
if (mediaInfo.meta.isHEVC === false) {
console.log("is not HEVC/H.265 media!");
playerObj.release();
_this.isH265 = false;
setTimeout(function () {
_this.initVideo();
}, 200);
return;
}
playBtn.disabled = false;
//H265 resize - 使用ResizeObserver监听元素尺寸变化
if (_this.isH265) {
_this.setupResizeObserver(token, playerCont, controllerCont);
}
//视频类型
if (mediaInfo.videoType == "vod") {
cachePts.max = mediaInfo.meta.durationMs / 1000;
progressCont.max = mediaInfo.meta.durationMs / 1000;
ptsLabel.textContent = _this.ls.durationText(0) + '/' + _this.ls.durationText(progressCont.max);
}
else {
cachePts.hidden = true;
progressCont.hidden = true;
ptsLabel.textContent = 'LIVE';
}
//封面按钮点击事件
coverBtn.onclick = function () {
playAction();
};
//没有音频
if (mediaInfo.meta.audioNone) {
progressVoice.value = 0;
progressVoice.style.display = 'none';
_this.muteState = true;
}
else {
if (_this.mutedMode) {
playerObj.setVoice(0.0);
progressVoice.value = 0;
_this.muteState = true;
}
else {
playerObj.setVoice(0.5);
progressVoice.value = 50;
_this.muteState = false;
}
}
//自动播放
if (_this.autoplayMode) {
playAction();
}
else {
coverToast.removeAttribute('hidden');
}
showLabel.textContent = _this.SHOW_DONE;
};
//缓存进度事件
playerObj.onCacheProcess = function (cPts) {
try {
var precent = cPts / progressCont.max;
var cacheWidth = precent * progressContW;
cachePts.style.width = cacheWidth + 'px';
}
catch (err) {
console.log(err);
}
};
//播放时间事件
playerObj.onPlayTime = function (videoPTS) {
if (mediaInfo.videoType == "vod") {
var precent = videoPTS / progressCont.max;
var progWidth = precent * progressContW;
progressPts.style.width = progWidth + 'px';
ptsLabel.textContent = _this.ls.durationText(videoPTS) + '/' + _this.ls.durationText(progressCont.max);
}
else {
ptsLabel.textContent = 'LIVE';
}
};
playerObj.do();
this.ncLoaded.emit(this.player);
return [2 /*return*/];
}
});
});
};
// 设置ResizeObserver监听.video-hls-265尺寸变化
VideoHlsComponent.prototype.setupResizeObserver = function (token, playerCont, controllerCont) {
var _this = this;
// 清理之前的observer
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
this.resizeObserver = new ResizeObserver(function (entries) {
console.log('resize observer');
// 跳过首次初始化触发
if (_this.isInitialResize) {
_this.isInitialResize = false;
console.log('resize initial');
return;
}
var entry = entries[0];
var _a = entry.contentRect, width = _a.width, height = _a.height;
console.log('resize width===========>', width);
console.log('resize height===========>', height);
// 清除之前的防抖定时器
if (_this.resizeDebounceTimer) {
clearTimeout(_this.resizeDebounceTimer);
console.log('resize debounce cleared');
}
//更改原player-container容器样式
playerCont.style.width = width + 'px';
playerCont.style.height = height + 'px';
//更改控制条controller宽度
controllerCont.style.width = width + 'px';
//更改原glplayer样式
var glplayer = _this.elementRef.nativeElement.querySelector('#' + _this.glplayerId);
glplayer.style.width = width + 'px';
glplayer.style.height = height + 'px';
//先更改原canvas样式为占满，后面再用新的值更新
var playerCanvas = glplayer.querySelector('canvas');
playerCanvas.style.width = width + 'px';
playerCanvas.style.height = height + 'px';
playerCanvas.style.marginLeft = '0px';
playerCanvas.style.marginTop = '0px';
// 设置防抖，500ms后执行resize逻辑
_this.resizeDebounceTimer = setTimeout(function () {
if (_this.ncResizeWay == 'default') {
console.log('resize start');
var config = {
player: 'resize-container',
width: width,
height: height,
token: token,
extInfo: {
coreProbePart: 0.4,
probeSize: 8192
}
};
var playerObjForResize_1 = window.new265webjs(_this.ncUrl, config);
playerObjForResize_1.onLoadFinish = function () {
playerObjForResize_1.play();
console.log('playerObjForResize play');
// 监听canvas样式变化
var glplayerForResize = _this.elementRef.nativeElement.querySelector('#resize-container');
var allPlayerCanvasForResize = glplayerForResize.querySelectorAll('canvas');
//这里查询all并使用最后一个canvas是因为可能在监听canvas尺寸变化过程中(还在播放准备中)又有新的play(尺寸又变化了)增加了新的canvas，同时存在多个canvas
//如果不使用最后一个canvas，都会监听第一个canvas，第一个canvas被移除后，后面的尺寸变化监听就是失效了且多余的canvas不会被移除
//总结：存在多个canvas时，会对每个都监听，也就是按顺序执行样式变化更新和清理
var playerCanvasForResize = allPlayerCanvasForResize[allPlayerCanvasForResize.length - 1];
// 使用MutationObserver监听style属性变化
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
var target = mutation.target;
var computedStyle = getComputedStyle(target);
var marginLeft = parseInt(computedStyle.marginLeft) || 0;
var marginTop = parseInt(computedStyle.marginTop) || 0;
// 检查是否出现了margin-top和margin-left属性
if (marginLeft !== 0 || marginTop !== 0) {
var width_1 = target.offsetWidth;
var height_1 = target.offsetHeight;
console.log('检测到canvas样式变化:', { marginLeft: marginLeft, marginTop: marginTop, width: width_1, height: height_1 });
// 执行清理操作
observer.disconnect();
playerObjForResize_1.release();
playerCanvasForResize.remove();
//更新原canvas样式
playerCanvas.style.width = width_1 + 'px';
playerCanvas.style.height = height_1 + 'px';
playerCanvas.style.marginLeft = marginLeft + 'px';
playerCanvas.style.marginTop = marginTop + 'px';
console.log('resize end');
}
}
});
});
// 开始监听canvas的style属性变化
observer.observe(playerCanvasForResize, {
attributes: true,
attributeFilter: ['style']
});
};
playerObjForResize_1.do();
}
else {
_this.reload();
}
}, 500); // 500ms防抖延迟
});
// 开始监听video-hls-265元素尺寸变化
var videoHls265Element = this.elementRef.nativeElement.querySelector('.video-hls-265');
this.resizeObserver.observe(videoHls265Element);
};
// 抽取尺寸更新逻辑到单独的方法
VideoHlsComponent.prototype.updatePlayerSize = function (mode, width, height) {
var playerCont = this.elementRef.nativeElement.querySelector('#player-container');
var controllerCont = this.elementRef.nativeElement.querySelector('#controller');
var glplayer = this.elementRef.nativeElement.querySelector('#' + this.glplayerId);
playerCont.style.width = width + 'px';
playerCont.style.height = height + 'px';
controllerCont.style.width = width + 'px';
glplayer.style.width = width + 'px';
glplayer.style.height = height + 'px';
// canvas
var playerCanvas = glplayer.querySelector('canvas');
if (playerCanvas) {
if (mode == 'fullscreen') {
playerCanvas.style.width = width + 'px';
playerCanvas.style.height = height + 'px';
playerCanvas.style.marginLeft = '0px';
playerCanvas.style.marginTop = '0px';
}
else {
playerCanvas.style.width = this.canvasStyle.width + 'px';
playerCanvas.style.height = this.canvasStyle.height + 'px';
playerCanvas.style.marginLeft = this.canvasStyle.marginLeft + 'px';
playerCanvas.style.marginTop = this.canvasStyle.marginTop + 'px';
}
}
};
//初始化
VideoHlsComponent.prototype.initVideo = function () {
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
console.log('启用hls.js!');
this.destroyAll(); //加载前先销毁
this.video = this.elementRef.nativeElement.querySelector('#video'); //获取video
//hls(m3u8)
if (this.video.canPlayType('application/vnd.apple.mpegurl')) {
this.video.src = this.ncUrl;
}
else if (Hls__default["default"].isSupported()) {
this.hls = new Hls__default["default"]();
this.hls.loadSource(this.ncUrl);
this.hls.attachMedia(this.video);
//错误监听
this.hls.on(Hls__default["default"].Events.ERROR, function (event, data) {
if (data.details == 'bufferStalledError') {
console.warn('warning:', data.error);
}
else if (data.details == 'fragParsingError') {
console.warn('warning:', data.error);
}
else if (data.details == 'bufferNudgeOnStall') {
console.warn('warning:', data.error);
}
else {
_this.playError = true;
console.error('error:', data.details);
console.error('error:', data.error);
}
});
}
//播放监听
this.video.addEventListener('play', function () {
_this.ncPlaying.emit(true);
});
//暂停监听
this.video.addEventListener('pause', function () {
_this.ncPlaying.emit(false);
});
//返回video对象
this.ncLoaded.emit(this.video);
return [2 /*return*/];
});
});
};
//销毁
VideoHlsComponent.prototype.destroyAll = function () {
if (this.hls) {
this.hls.destroy();
}
if (this.video) {
this.destroyVideo(this.video);
}
};
VideoHlsComponent.prototype.destroyVideo = function (video) {
video.pause();
video.src = '';
video.removeEventListener('play', function () { });
video.removeEventListener('pause', function () { });
video.removeEventListener('loadedmetadata', function () { });
video.remove();
};
return VideoHlsComponent;
}());
VideoHlsComponent.currentFullscreenPlayerId = null; //静态属性来记录当前全屏的播放器ID
VideoHlsComponent.h265webjsLoaded = false; // 添加静态变量跟踪脚本加载状态
VideoHlsComponent.missileLoaded = false; // 添加静态变量跟踪missile加载状态
VideoHlsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoHlsComponent, deps: [{ token: i0__namespace.ElementRef }, { token: LocalService }], target: i0__namespace.ɵɵFactoryTarget.Component });
VideoHlsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VideoHlsComponent, selector: "nc-video-hls", inputs: { ncUrl: "ncUrl", ncErrorTime: "ncErrorTime", ncAutoplay: "ncAutoplay", ncMuted: "ncMuted", ncControls: "ncControls", ncResizeWay: "ncResizeWay" }, outputs: { ncPlaying: "ncPlaying", ncLoaded: "ncLoaded" }, ngImport: i0__namespace, template: "<div class=\"video-hls-265\" *ngIf=\"isH265\">\r\n <!--\u52A0\u8F7D\u3001\u9519\u8BEF\u4FE1\u606F-->\r\n <div class=\"error-container\" *ngIf=\"networkState != 5\">\r\n <!--\u52A0\u8F7D\u4E2D-->\r\n <div class=\"error-text\" *ngIf=\"networkState == 1\">\r\n <div class=\"loading-spinner\"></div>\r\n <div>\u52A0\u8F7D\u4E2D...</div>\r\n </div>\r\n <!--\u9519\u8BEF-->\r\n <div class=\"error-text\" *ngIf=\"networkState == 2 || networkState == 3 || networkState == 4\">\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 *ngIf=\"networkState == 2\">\u89C6\u9891\u5730\u5740\u8BBF\u95EE\u8D85\u65F6\uFF0C\u64AD\u653E\u5931\u8D25\uFF01</div>\r\n <div *ngIf=\"networkState == 3\">\u89C6\u9891\u5730\u5740\u683C\u5F0F\u9519\u8BEF\uFF0C\u4EC5\u652F\u6301m3u8\u683C\u5F0F\uFF01</div>\r\n <div *ngIf=\"networkState == 4\">\u521D\u59CB\u5316\u7EC4\u4EF6\u5931\u8D25\uFF0C\u8BF7\u5237\u65B0\u9875\u9762\u91CD\u8BD5\u3002</div>\r\n </div>\r\n </div>\r\n\r\n <!--\u5168\u5C4F\u64AD\u653E\u6309\u94AE-->\r\n <div id=\"coverLayer\" hidden=\"hidden\">\r\n <svg id=\"coverLayerBtn\" t=\"1730859326001\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5366\" width=\"48\" height=\"48\">\r\n <path\r\n d=\"M870.2 466.333333l-618.666667-373.28a53.333333 53.333333 0 0 0-80.866666 45.666667v746.56a53.206667 53.206667 0 0 0 80.886666 45.666667l618.666667-373.28a53.333333 53.333333 0 0 0 0-91.333334z\"\r\n fill=\"#ffffff\" p-id=\"5367\"></path>\r\n </svg>\r\n </div>\r\n\r\n <div id=\"player-container\">\r\n <!--\u89C6\u9891\u5BB9\u5668-->\r\n <div [id]=\"glplayerId\" class=\"glplayer\"></div>\r\n <!--\u5DE5\u5177\u680F-->\r\n <div id=\"controller\" class=\"controller\">\r\n\r\n <!--\u8FDB\u5EA6\u6761-->\r\n <div id=\"progress-contaniner\" class=\"progress-common progress-contaniner\">\r\n <div id=\"cachePts\" class=\"progress-common cachePts\"></div>\r\n <div id=\"progressPts\" class=\"progress-common progressPts\"></div>\r\n </div>\r\n\r\n <!--\u64CD\u4F5C\u680F-->\r\n <div id=\"operate-container\" class=\"operate-container\">\r\n <div class=\"left-container\">\r\n <!--\u65F6\u95F4-->\r\n <span id=\"ptsLabel\" class=\"ptsLabel\">00:00:00/00:00:00</span>\r\n <!--\u58F0\u97F3-->\r\n <div class=\"voice-div\">\r\n <span>\r\n <a id=\"muteBtn\" class=\"muteBtn\" href=\"javascript:void(0)\">\r\n <svg *ngIf=\"!muteState\" t=\"1730872283671\" class=\"icon\" viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"1952\" width=\"20\" height=\"20\">\r\n <path\r\n d=\"M789.904 256.006a35.337 35.337 0 0 0-26.856-4.837 35.348 35.348 0 0 0-22.293 15.745c-10.69 16.753-6.085 38.982 10.384 50.116 3.845 2.61 95.493 66.021 95.493 223.695 0 158.078-87.909 221.529-91.385 223.917-16.537 11.266-20.958 33.723-9.931 50.414a35.583 35.583 0 0 0 22.707 15.351 35.58 35.58 0 0 0 26.885-5.339c5.043-3.363 123.277-85.635 123.277-284.382 0-199.051-123.017-281.284-128.281-284.68M678.54 362.663a35.357 35.357 0 0 0-27.125-1.288 35.378 35.378 0 0 0-20.041 18.319c-8.474 17.905-1.265 39.308 16.321 48.436 2.279 1.192 55.866 29.426 55.866 109.94 0 85.97-50.116 114.463-51.758 115.397-17.756 9.141-24.891 30.84-16.023 48.732a35.783 35.783 0 0 0 48.025 16.286c3.739-1.943 91.272-47.911 91.272-180.375 0-127.906-92.615-173.577-96.536-175.481M515.796 800.753l-74.695-67.89-122.264-111.176a37.404 37.404 0 0 0-25.17-9.71l-113.979 0.034-0.37-239.827h150.05a37.423 37.423 0 0 0 32.001-9.072l79.698-72.488 74.688-67.89v578.019h0.041z m44.361-678.294c-9.147-4.028-33.273-10.792-59.747 13.295l-59.31 53.928-118.604 107.814H179.318c-41.107 0.165-74.341 33.546-74.318 74.653v239.862c0 41.16 33.346 74.655 74.318 74.655h99.932L441.1 833.803l59.383 53.963c14.976 13.597 29.165 17.403 40.334 17.403 8.621 0 15.494-2.279 19.454-4.034 9.112-4.029 30.246-17.25 30.246-52.99v-672.84c0-24.685-11.35-44.406-30.36-52.846z m0 0\"\r\n fill=\"#ffffff\" p-id=\"1953\"></path>\r\n </svg>\r\n <svg *ngIf=\"muteState\" t=\"1730872181114\" class=\"icon\" viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"13389\" width=\"20\"\r\n height=\"20\">\r\n <path\r\n d=\"M515.756 621.32v179.391L441.1 732.859 318.837 621.685a37.46 37.46 0 0 0-25.169-9.714l-113.981 0.036-0.369-239.826h87.299l-74.687-74.687h-12.612c-41.107 0.164-74.341 33.553-74.318 74.651v239.862c0 41.171 33.348 74.651 74.318 74.651h99.929L441.1 833.808l59.382 53.965c14.977 13.596 29.165 17.387 40.332 17.387 8.621 0 15.496-2.26 19.455-4.028 9.113-4.028 30.245-17.241 30.245-52.981V696.08l-74.758-74.76zM846.634 540.729c0 72.792-18.663 125.298-39.116 161.239l52.156 52.161c29.753-45.873 58.512-115.439 58.512-213.436 0-199.056-123.02-281.288-128.283-284.678a35.316 35.316 0 0 0-26.859-4.848 35.397 35.397 0 0 0-22.289 15.747c-10.689 16.749-6.087 38.984 10.384 50.119 3.845 2.605 95.495 66.011 95.495 223.696z\"\r\n fill=\"#ffffff\" p-id=\"13390\"></path>\r\n <path\r\n d=\"M647.697 428.133c2.278 1.185 55.865 29.416 55.865 109.935 0 20.759-3.012 38-7.463 52.47l54.616 54.621c13.733-26.828 24.363-61.51 24.363-107.055 0-127.905-92.616-173.577-96.534-175.472v0.036a35.383 35.383 0 0 0-27.128-1.294 35.349 35.349 0 0 0-20.039 18.316c-8.475 17.916-1.267 39.312 16.32 48.443zM417.558 312.002l23.511-21.378 74.687-67.889V410.2l74.76 74.76V175.313c0-24.695-11.35-44.415-30.359-52.853-9.145-4.028-33.275-10.789-59.747 13.304l-59.309 53.91-76.405 69.456 52.862 52.872zM829.266 866.596c-9.55 0-19.1-3.645-26.39-10.935l-634.53-634.53c-14.58-14.58-14.58-38.2 0-52.78 14.58-14.58 38.2-14.58 52.78 0l634.53 634.529c14.58 14.58 14.58 38.2 0 52.78-7.29 7.291-16.84 10.936-26.39 10.936z\"\r\n fill=\"#ffffff\" p-id=\"13391\"></path>\r\n </svg>\r\n </a>\r\n </span>\r\n <progress id=\"progressVoice\" class=\"progressVoice\" value=\"0\" max=\"100\"></progress>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-container\">\r\n <!--\u64AD\u653E\u3001\u6682\u505C-->\r\n <div id=\"playBtn\" [title]=\"isPlaying ? '\u6682\u505C' : '\u64AD\u653E'\">\r\n <svg *ngIf=\"!isPlaying\" t=\"1730861815254\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8053\" width=\"20\" height=\"20\">\r\n <path\r\n d=\"M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z\"\r\n fill=\"#ffffff\" p-id=\"8054\"></path>\r\n </svg>\r\n <svg *ngIf=\"isPlaying\" t=\"1730861393868\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\" p-id=\"6827\" width=\"20\" height=\"20\">\r\n <path\r\n d=\"M428.539658 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661L285.613458 862.501816c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L428.539658 833.494155z\"\r\n fill=\"#ffffff\" p-id=\"6828\"></path>\r\n <path\r\n d=\"M760.124635 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661l-113.918539 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L760.124635 833.494155z\"\r\n fill=\"#ffffff\" p-id=\"6829\"></path>\r\n </svg>\r\n </div>\r\n <!--\u5168\u5C4F-->\r\n <div id=\"fullScreenBtn\" class=\"fullScreenBtn\" [title]=\"isFullScreenBtn ? '\u9000\u51FA\u5168\u5C4F' : '\u5168\u5C4F'\">\r\n <svg *ngIf=\"!isFullScreenBtn\" t=\"1730875130357\" class=\"icon\" viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8257\" width=\"20\" height=\"20\">\r\n <path\r\n d=\"M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z\"\r\n fill=\"#ffffff\" p-id=\"8258\"></path>\r\n </svg>\r\n <svg *ngIf=\"isFullScreenBtn\" t=\"1730875137734\" class=\"icon\" viewBox=\"0 0 1024 1024\"\r\n version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"8467\" width=\"20\" height=\"20\">\r\n <path\r\n d=\"M298.666667 631.466667H226.133333v-81.066667h217.6v204.8h-85.333333v-68.266667l-128 128L170.666667 759.466667l128-128z m422.4 0l128 128-59.733334 59.733333-128-128v68.266667h-85.333333V554.666667h217.6v81.066666h-72.533333zM298.666667 341.333333L187.733333 230.4 243.2 170.666667l115.2 115.2V217.6h85.333333v204.8H226.133333V341.333333H298.666667z m430.933333 0h64v81.066667h-217.6V217.6h85.333333v72.533333L780.8 170.666667l59.733333 59.733333L729.6 341.333333z\"\r\n fill=\"#ffffff\" p-id=\"8468\"></path>\r\n </svg>\r\n </div>\r\n <!--\u4FE1\u606F-->\r\n <span id=\"showLabel\" class=\"showLabel\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n\r\n<div style=\"position: fixed;left: 0;top: 10000px;\">\r\n <div id=\"resize-container\"></div>\r\n</div>\r\n\r\n<div *ngIf=\"!isH265\" class=\"video-hls-264\">\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\">\u64AD\u653E\u5931\u8D25</div>\r\n </div>\r\n <video class=\"video\" [ngStyle]=\"{'object-fit': 'contain' }\" crossOrigin=\"anonymous\" [controls]=\"controlsMode\"\r\n [muted]=\"mutedMode\" [autoplay]=\"autoplayMode\" id=\"video\"></video>\r\n</div>", styles: [".video-hls-265{width:100%;height:100%;position:relative}.video-hls-265 .error-container{width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:10000;background-color:#000;display:flex;align-items:center;justify-content:center;color:#fff}.video-hls-265 .error-container .error-text{display:flex;flex-direction:column;justify-content:center;align-items:center}.video-hls-265 .error-container .error-text .loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #a7a7a7;border-radius:50%;margin:0 auto 10px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-hls-265 #coverLayer{width:100%;height:100%;z-index:10000;position:absolute;top:0px;left:0px;background-color:#00000080}.video-hls-265 #coverLayer #coverLayerBtn{cursor:pointer;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-hls-265 #player-container{position:absolute;margin:auto;left:0;right:0;overflow:hidden}.video-hls-265 #player-container .controller{background-color:#0009;width:960px;height:40px;position:absolute;z-index:99999;left:0;bottom:0}.video-hls-265 #player-container .controller .progress-common{border-radius:5px;border:none;margin-bottom:2px}.video-hls-265 #player-container .controller .progress-contaniner{z-index:1000;width:100%;background-color:#666;position:absolute;top:0;height:6px}.video-hls-265 #player-container .controller .progress-contaniner .cachePts{position:absolute;z-index:1001;width:0px;background-color:#d9d9d9}.video-hls-265 #player-container .controller .progress-contaniner .progressPts{position:absolute;z-index:1002;width:0px;height:100%;background-color:#f64f1e}.video-hls-265 #player-container .controller .operate-container{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between}.video-hls-265 #player-container .controller .operate-container .left-container{display:flex;align-items:center}.video-hls-265 #player-container .controller .operate-container .left-container .ptsLabel{font-size:14px;color:#fff;margin-left:5px}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div{color:#fff;margin-left:10px;display:flex;align-items:center}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div .muteBtn{color:#fff;display:flex;align-items:center;opacity:.7}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div .muteBtn:hover{opacity:1}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div .progressVoice{width:100px;height:6px;cursor:pointer;border-radius:5px}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div .progressVoice::-moz-progress-bar{background-color:#d9d9d9}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div .progressVoice::-webkit-progress-value{background-color:#d9d9d9}.video-hls-265 #player-container .controller .operate-container .left-container .voice-div span{color:#fff;margin-right:5px}.video-hls-265 #player-container .controller .operate-container .right-container{display:flex;align-items:center}.video-hls-265 #player-container .controller .operate-container .right-container #playBtn{cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:5px;opacity:.7}.video-hls-265 #player-container .controller .operate-container .right-container #playBtn:hover{opacity:1}.video-hls-265 #player-container .controller .operate-container .right-container .fullScreenBtn{margin-right:5px;display:flex;align-items:center;cursor:pointer;opacity:.7}.video-hls-265 #player-container .controller .operate-container .right-container .fullScreenBtn:hover{opacity:1}.video-hls-265 #player-container .controller .operate-container .right-container .showLabel{height:18px;font-size:8px;color:#fff;border-bottom:1px solid #666666;padding-top:1px;padding-left:5px;padding-right:5px;margin-right:5px}.video-hls-264{width:100%;height:100%;position:relative}.video-hls-264 .playError{background-color:#000;width:100%;height:100%;position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:2}.video-hls-264 .playError .errorText{color:#cdcdcd;font-size:16px;margin-top:10px;letter-spacing:1px}.video-hls-264 .video{width:100%;height:100%}\n"], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: VideoHlsComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'nc-video-hls',
templateUrl: './video-hls.component.html',
styleUrls: ['./video-hls.component.less']
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: LocalService }]; }, propDecorators: { ncUrl: [{
type: i0.Input
}], ncErrorTime: [{
type: i0.Input
}], ncAutoplay: [{
type: i0.Input
}], ncMuted: [{
type: i0.Input
}], ncControls: [{
type: i0.Input
}], ncResizeWay: [{
type: i0.Input
}], ncPlaying: [{
type: i0.Output
}], ncLoaded: [{
type: i0.Output
}] } });
var NcVideoHlsModule = /** @class */ (function () {
function NcVideoHlsModule() {
}
return NcVideoHlsModule;
}());
NcVideoHlsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoHlsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcVideoHlsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoHlsModule, declarations: [VideoHlsComponent], imports: [i2.CommonModule], exports: [VideoHlsComponent] });
NcVideoHlsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoHlsModule, imports: [[
i2.CommonModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcVideoHlsModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
VideoHlsComponent
],
imports: [
i2.CommonModule
],
exports: [
VideoHlsComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcVideoHlsModule = NcVideoHlsModule;
exports.VideoHlsComponent = VideoHlsComponent;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-video-hls.umd.js.map