如何在 Ionic 2 + Angular 2 中使用 Video.js
How to use Video.js with Ionic 2 + Angular 2
Q) 有人可以给我一个简单的工作示例,说明如何在 Ionic 2 的 component/page 中包含 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 中的渲染效果与人们预期的不同:
野生动物园:
从 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) {
}
}
Q) 有人可以给我一个简单的工作示例,说明如何在 Ionic 2 的 component/page 中包含 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 中的渲染效果与人们预期的不同:
野生动物园:
从 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) {
}
}