如何在Ionic 2 + Angular 2中使用Video.js

Question

如何在Ionic 2 + Angular 2中使用Video.js

angularionic2html5-videovideo.js

3

Q) 有没有人能给我一个简单的、有效的例子，展示如何在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:

- Dave

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dave · Accepted Answer

从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) {
    }
}