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() 
    } 
}