ng-cw-v12
Version:
Angular UI component library
187 lines (182 loc) • 10.2 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import Jessibuca from 'jessibuca-js';
class VideoFlvComponent {
constructor() {
this.playError = false;
this.videoUrl = '';
this.ncLoaded = new EventEmitter(); //返回Jessibuca
this.ncPlaying = new EventEmitter(); //返回播放状态
this.mutedMode = true;
this.autoplayMode = false;
this.fillMode = false;
this.screenshotMode = false;
this.recordMode = false;
this.bandwidthMode = false;
this.controlsMode = true;
}
set ncUrl(value) {
this.videoUrl = value;
setTimeout(() => {
//加延迟，防止其他传入参数未获取到
this.init();
});
}
;
//静音
set ncMuted(value) {
this.mutedMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//自动播放
set ncAutoplay(value) {
this.autoplayMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//铺满
set ncFill(value) {
this.fillMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//截图
set ncScreenshot(value) {
this.screenshotMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//录屏
set ncRecord(value) {
this.recordMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//网速
set ncBandwidth(value) {
this.bandwidthMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
//隐藏控制栏
set ncControls(value) {
this.controlsMode = value !== null && value !== undefined && value !== false && value !== 'false';
}
ngOnDestroy() {
this.destroy();
}
ngAfterViewInit() {
}
init() {
this.destroy();
this.jessibuca = new Jessibuca({
url: this.videoUrl,
decoder: 'assets/jessibuca-js/decoder.js',
container: this.videoContainer.nativeElement,
videoBuffer: 0.2,
isResize: !this.fillMode,
loadingText: '加载中',
debug: false,
timeout: 8,
showBandwidth: this.bandwidthMode,
operateBtns: {
fullscreen: true,
screenshot: this.screenshotMode,
play: true,
audio: true,
record: this.recordMode //录制按钮
},
isNotMute: false,
controlAutoHide: true //自动隐藏控制栏
});
if (!this.controlsMode) {
const controls = this.videoContainer.nativeElement.querySelector('.jessibuca-controls');
controls === null || controls === void 0 ? void 0 : controls.remove();
}
//错误监听
this.jessibuca.on("error", (error) => {
console.error('error:', error);
this.playError = true;
});
//超时监听
this.jessibuca.on("timeout", (error) => {
console.error('timeout:', error);
this.playError = true;
});
//播放监听
this.jessibuca.on("play", () => {
this.ncPlaying.emit(true);
});
//暂停监听
this.jessibuca.on("pause", () => {
this.ncPlaying.emit(false);
});
this.jessibuca.on("load", () => {
//自动播放
if (this.autoplayMode) {
this.jessibuca.play();
}
//开启声音
if (!this.mutedMode) {
this.jessibuca.cancelMute();
}
//返回对象
this.ncLoaded.emit(this.jessibuca);
});
}
destroy() {
if (this.jessibuca) {
this.jessibuca.destroy();
}
}
}
VideoFlvComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: VideoFlvComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
VideoFlvComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: VideoFlvComponent, selector: "nc-video-flv", inputs: { ncUrl: "ncUrl", 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 }], ngImport: i0, 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\">\u64AD\u653E\u5931\u8D25</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{background-color:#000;width:100%;height:100%;position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center}::ng-deep .video-container .playError .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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: VideoFlvComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-video-flv',
templateUrl: './video-flv.component.html',
styleUrls: ['./video-flv.component.less']
}]
}], ctorParameters: function () { return []; }, propDecorators: { videoContainer: [{
type: ViewChild,
args: ['videoContainer']
}], ncUrl: [{
type: Input
}], ncLoaded: [{
type: Output
}], ncPlaying: [{
type: Output
}], ncMuted: [{
type: Input
}], ncAutoplay: [{
type: Input
}], ncFill: [{
type: Input
}], ncScreenshot: [{
type: Input
}], ncRecord: [{
type: Input
}], ncBandwidth: [{
type: Input
}], ncControls: [{
type: Input
}] } });
class NcVideoFlvModule {
}
NcVideoFlvModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVideoFlvModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcVideoFlvModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVideoFlvModule, declarations: [VideoFlvComponent], imports: [CommonModule], exports: [VideoFlvComponent] });
NcVideoFlvModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVideoFlvModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcVideoFlvModule, decorators: [{
type: NgModule,
args: [{
declarations: [
VideoFlvComponent
],
imports: [
CommonModule
],
exports: [
VideoFlvComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcVideoFlvModule, VideoFlvComponent };
//# sourceMappingURL=ng-cw-v12-video-flv.js.map