Angular2与video.js错误不兼容源

Question

VIDEOJS：错误：（CODE：4 MEDIA_ERR_SRC_NOT_SUPPORTED）未找到此视频的兼容源。

我想在角度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() 
    } 
} 

Answer 1

看起来像一个问题与访问视频，下面的代码工作

<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

Answer 2

您应该使用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() 
    } 
}