错误参考错误:在角度cli中'videojs未定义'?
我正在将我的角度2项目从systemjs转换为角度cli。我删除了index.html中的所有js和css文件,并在angular-cli.json中包含了所有文件和videojs css和js文件, 项目正确编译,但执行中出现错误“videojs未定义”, 我没有看到错误,如果我在index.html 包含videojs文件,你能帮我一把。如何解决角度cli中的这个错误?错误参考错误:在角度cli中'videojs未定义'?
角cli.json文件
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular-cli-project"
},
"apps": [{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"./assets/admin/pages/css/lock.css",
"./assets/css/dashboardPage.css",
"./assets/css/facebook.css",
"./assets/css/form.errors.css",
"./assets/js/videoCapturing/videojs.record.min.css",
"./assets/js/videojs/video-js.css",
],
"scripts": [
"./assets/js/videojs/video.min.js",
"./assets/js/videoCapturing/RecordRTC.js",
"./assets/js/videojsvideojs.record.js",
"./assets/js/videojs/videojs-contrib-hls.js",
"./assets/js/videojs/videojs.hotkeys.min.js",
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [{
"project": "src/tsconfig.app.json"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
组件代码:
import {Component,OnInit, OnDestroy } from '@angular/core';
declare var videojs :any;
@Component({
selector: 'app-play-video',
templateUrl: './play-video.component.html',
styleUrls : []
})
export class PlayVideoComponent implements OnInit{
public videoJSplayer :any;
ngOnInit() {
this.videoJSplayer = videojs(document.getElementById('example_video_11'), {}, function() { // here videojs is undefined.
this.play();
}
}
}
播放video.component.html:
<video id="example_video_11" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
</video>
有几件事情她的Ë
ngOnInit
下你的代码是缺少一个右)
你应该使用
AfterViewInit
,而不是OnInit
如果你直接访问DOM。 (document.getElementById
)您需要安装
@types/videojs
的定义。 或者,您可以使用window["videojs"]()
,因为videojs将在窗口var上。我刚才没有你做了什么,添加了
video.min.js
到src/assets/js/video.min.js
然后.angular-cli.json
加入"./assets/js/videojs/video.min.js"
到scripts
。完成上述操作后,它工作得很好。
谢谢你的回答Ahmed Musallam,它的工作完美。 –
高兴地帮助:) –
如果您打开chrome控制台并尝试'videojs'它是未定义的? –
是的,我看到console.videojs中的错误是未定义的 –