带有video.js错误的Angular2没有兼容的源答案

【问题标题】：Angular2 with video.js error no compatible source带有video.js错误的Angular2没有兼容的源
【发布时间】：2016-08-30 14:14:04
【问题描述】：

VIDEOJS: 错误: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 找不到此视频的兼容来源。

我正在尝试在 Angular 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()
    }
}

【问题讨论】：

Eclipse 只是您正在使用的 IDE，并没有告诉我们任何信息。设置问题标签以包含您所询问的编程语言。请花时间阅读tour，了解 Stack Overflow 的工作原理。

标签： angular video.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

访问视频似乎有问题，下面的代码正在运行

<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

【讨论】：