Angular2与video.js错误不兼容源
问题描述:
VIDEOJS:错误:(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)未找到此视频的兼容源。Angular2与video.js错误不兼容源
我想在角度2项目中播放视频。 这里是我的代码:
import {Component, ElementRef, OnInit, OnDestroy} from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.mp4" type="video/mp4" />
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.webm" type="video/webm" />
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.ogv" type="video/ogg" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
`
})
export class AppComponent implements OnInit, OnDestroy {
private _elementRef: ElementRef
private videoJSplayer : VideoJSPlayer
constructor(elementRef: ElementRef) {
this._elementRef = elementRef
}
ngOnInit() {
var player = videojs('example_video_1', { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
}
ngOnDestroy() {
console.log('Deinit - Destroyed Component')
this.videoJSplayer.dispose()
}
}
答
看起来像一个问题与访问视频,下面的代码工作
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
检查:https://github.com/mbalex99/ng2-videojs/blob/master/app/app.ts
答
您应该使用ngAfterViewInit()
而不是ngOnInit()
这是在视图初始化之前调用,以便videojs没有要选择的元素。
确保你已经安装了npm install --save @types/videojs
例子:
import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild } from 'angular2/core';
@Component({
selector: 'my-app',
template: `
<video #video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.mp4" type="video/mp4" />
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.webm" type="video/webm" />
<source src="C:/Users/knare/Downloads/Joey Montana - Picky.ogv" type="video/ogg" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
`
})
export class AppComponent implements AfterViewInit, OnInit, OnDestroy {
@ViewChild() video;
private _elementRef: ElementRef
private videoJSplayer : VideoJSPlayer
constructor(elementRef: ElementRef) {
this._elementRef = elementRef
}
AfterViewInit() {
var player = videojs(this.video.nativeElement, { /* Options */ }, function() {
console.log('Good to go!');
this.play(); // if you don't trust autoplay for some reason
// How about an event listener?
this.on('ended', function() {
console.log('awww...over so soon?');
});
});
}
ngOnDestroy() {
console.log('Deinit - Destroyed Component')
this.videoJSplayer.dispose()
}
}
Eclipse的只是你正在使用的IDE,并告诉我们什么。设置问题标签以包含您所问的编程语言。请花时间阅读[游览](http://*.com/tour)以了解Stack Overflow如何工作。 –