如何导入videojs-offset
How to import videojs-offset
我有以下组件
import {
Component,
ElementRef,
AfterViewInit,
ViewChild,
Input,
EventEmitter,
Output
} from '@angular/core';
import * as videojs from 'video.js';
import * as hls from 'videojs-contrib-hls';
require('videojs-offset');
export type VideoPlayerEvent = 'play' | 'pause' | 'ended';
@Component({
selector: 'app-video-player',
templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements AfterViewInit {
@ViewChild('videoPlayer', { static: false })
videoPlayer: ElementRef;
@Input()
videoUrl: string;
@Input()
videoType: string;
/** Subject that emits when the component has been destroyed. */
@Input()
clipIn: string;
@Input()
clipOut: string;
@Output()
onPlayerEvent = new EventEmitter<VideoPlayerEvent>();
videoJsPlayer: videojs.Player;
constructor() { }
ngAfterViewInit() {
if (this.videoUrl) {
const self = this;
this.videoJsPlayer = videojs(this.videoPlayer.nativeElement, {}, function () {
this.on('play', () => self.onPlayerEvent.emit('play'));
this.on('pause', () => self.onPlayerEvent.emit('pause'));
this.on('ended', () => self.onPlayerEvent.emit('ended'));
return hls;
});
if(this.clipIn && this.clipOut) {
this.videoJsPlayer.offset({
start: this.clipIn,
end: this.clipOut,
restart_beginning: false
});
}
}
}
}
我正在尝试使用 videojs-offset 库来流式传输由 clipIn 和 clipOut[= 指示的 HLS 流的一部分13=]
我在编译时收到以下错误
ERROR in ../../libs/reusable-ui/video-player/src/lib/components/video-player.component.ts:55:28 - error TS2339: Property 'offset' does not exist on type 'Player'.
我认为这是由于我错误地导入了库,这很奇怪,因为文档声明要这样导入它
require('videojs-offset');
谁能告诉我我在这里遗漏了什么?
Github 上有一个关于此的已解决问题。作者建议如下:
将其添加到您的 angular.json
:
"scripts": [
"node_modules/video.js/dist/video.js",
"node_modules/videojs-offset/dist/videojs-offset.js"
]
删除 require('videojs-offset');
并全局使用 window['videojs']
。
在此处阅读更多内容 https://github.com/cladera/videojs-offset/issues/38
我有以下组件
import {
Component,
ElementRef,
AfterViewInit,
ViewChild,
Input,
EventEmitter,
Output
} from '@angular/core';
import * as videojs from 'video.js';
import * as hls from 'videojs-contrib-hls';
require('videojs-offset');
export type VideoPlayerEvent = 'play' | 'pause' | 'ended';
@Component({
selector: 'app-video-player',
templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements AfterViewInit {
@ViewChild('videoPlayer', { static: false })
videoPlayer: ElementRef;
@Input()
videoUrl: string;
@Input()
videoType: string;
/** Subject that emits when the component has been destroyed. */
@Input()
clipIn: string;
@Input()
clipOut: string;
@Output()
onPlayerEvent = new EventEmitter<VideoPlayerEvent>();
videoJsPlayer: videojs.Player;
constructor() { }
ngAfterViewInit() {
if (this.videoUrl) {
const self = this;
this.videoJsPlayer = videojs(this.videoPlayer.nativeElement, {}, function () {
this.on('play', () => self.onPlayerEvent.emit('play'));
this.on('pause', () => self.onPlayerEvent.emit('pause'));
this.on('ended', () => self.onPlayerEvent.emit('ended'));
return hls;
});
if(this.clipIn && this.clipOut) {
this.videoJsPlayer.offset({
start: this.clipIn,
end: this.clipOut,
restart_beginning: false
});
}
}
}
}
我正在尝试使用 videojs-offset 库来流式传输由 clipIn 和 clipOut[= 指示的 HLS 流的一部分13=]
我在编译时收到以下错误
ERROR in ../../libs/reusable-ui/video-player/src/lib/components/video-player.component.ts:55:28 - error TS2339: Property 'offset' does not exist on type 'Player'.
我认为这是由于我错误地导入了库,这很奇怪,因为文档声明要这样导入它
require('videojs-offset');
谁能告诉我我在这里遗漏了什么?
Github 上有一个关于此的已解决问题。作者建议如下:
将其添加到您的 angular.json
:
"scripts": [
"node_modules/video.js/dist/video.js",
"node_modules/videojs-offset/dist/videojs-offset.js"
]
删除 require('videojs-offset');
并全局使用 window['videojs']
。
在此处阅读更多内容 https://github.com/cladera/videojs-offset/issues/38