angular - 如何将 Video.js 与 Ionic 2 + Angular 2 一起使用

Question

问)有人可以给我一个简单的工作示例，说明如何在 Ionic 2 的组件/页面中包含 video.js，最好是居中播放大按钮吗？

背景:

我一直在尝试让 video.js 与我的 Ionic 2 应用程序一起工作以呈现视频列表，但我就是想不出来。

当我有标记时我的视频呈现:

<ion-row *ngFor="let item of videoList">
    <video id="my-player-{{item.id}}" class="video-js vjs-default-skin" 
        controls preload="auto" data-setup='{}'>
        <source src="{{item.previewVideoUrl}}" type="video/mp4">
    </video>
</ion-row>  

Chrome :

..但这显然只是浏览器内置的 html5 播放器，而不是 video.js 播放器，因为它在 chrome + safari 中的渲染效果与人们预期的不同:

Safari :

Answer 1

从 npm 安装模块，即

npm install video.js --save
npm install -s safe-json-parse

然后就可以在组件中初始化播放器了:

在 html 中:

<video id="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto">
    <source [src]="url" type="video/mp4" />
</video>

然后在你的代码中:

import videojs from 'video.js';

public url: string = "https://someurltovideo.com/wowsers/mp4"
...


initPlayer() {
    try {
        // setup the player via the unique element ID
        var element = document.getElementById('videoPlayer');
        if (element == null) {
            throw "error loading blah";
        }
        // if we get here, all good!
        videojs(element, {}, () => { });
    }
    catch (e) {
    }
}