介绍
Videogular是AngularJS的HTML5视频播放器。我们正在开发专注于HTML5功能和移动设备的Videogular,因此我们不支持Flash,但是您可以开发一个插件并轻松提供后备支持。
这是一个(从字面上)由两个Fucking Developers领导的小项目 ,还有其他一些视频播放器可能更适合您的项目。但是,如果您在项目中使用AngularJS,我们强烈建议您使用Videogular,因为它提供了可绑定的API。
这个怎么运作?
Videogular是HTML5视频标签的包装,因此您可以添加所需的任何内容。要创建播放器,您需要编写纯HTML,因此自定义视频播放器非常直观。Videogular的API提供了一些特殊的标记和属性来帮助您完成此过程。这为每个人提供了一个非常强大但易于使用的解决方案。
安装
我们建议使用 Node.js 和NPM安装Videogular。
1
|
npm install videogular
|
此外,您可以安装主题和几个插件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
npm install videogular-themes-default
npm install videogular-controls
npm install videogular-buffering
npm install videogular-overlay-play
npm install videogular-poster
npm install videogular-ima-ads
npm install videogular-angulartics
npm install videogular-dash
|
另外,您也可以使用 Bower, 或者在Github上有公共存储库,您可以在其中找到所有可用的版本作为标签来手动下载。
使用Bower安装Videogular:
1
|
bower install videogular
|
使用Bower安装Videogular主题:
1
|
bower install videogular-themes-default
|
有了Videogular核心和主题,您就可以开始使用它了,但是建议您也安装一些可能对您有用的插件:
1
2
3
4
5
6
7
8
9
10
11
|
bower install videogular-controls
bower install videogular-buffering
bower install videogular-overlay-play
bower install videogular-poster
bower install videogular-ima-ads
bower install videogular-angulartics
|
既然您已经安装了Videogular文件,我们将添加AngularJS和AngularJS Sanitize,这两个主要依赖项。没有这些软件包将无法运行,对不起。
使用bower安装AngularJS和AngularJS Sanitize:
1
2
3
|
bower install angular
bower install angular-sanitize
|
第一滴血!
好吧,让我们动手吧!
首先,按照以下顺序将JS文件放在您的身体末端:AngularJS,AngularJS Sanitize,Videogular和Videogular插件。
现在创建一个名为“ main.js”的JS文件,并将脚本放在正文的末尾,在其他脚本的下方。
应该是这样的:
1
2
3
4
5
6
7
8
|
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/videogular/videogular.js"></script>
<script src="bower_components/videogular-controls/vg-controls.js"></script>
<script src="bower_components/videogular-overlay-play/vg-overlay-play.js"></script>
<script src="bower_components/videogular-poster/vg-poster.js"></script>
<script src="bower_components/videogular-buffering/vg-buffering.js"></script>
<script src="js/main.js"></script>
|
现在,您已经加载了所有必需的脚本,我们可以开始编码了!
AngularJS代码
打开您的“ main.js”文件并添加以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster"
]
)
.controller('HomeCtrl',
["$sce", function ($sce) {
this.config = {
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
],
tracks: [
{
src: "http://www.videogular.com/assets/subs/pale-blue-dot.vtt",
kind: "subtitles",
srclang: "en",
label: "English",
default: ""
}
],
theme: "bower_components/videogular-themes-default/videogular.css",
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
}]
);
|
如果您已经知道AngularJS,则可以看到该代码非常基本。
我们在名为“ myApp”的应用程序中添加了所有模块,并创建了名为“ HomeCtrl”的控制器。
在此控制器内部,我们创建了一个名为config的可绑定对象,该对象基本上具有初始化播放器所需的全部内容。当然,这只是一个推荐的结构,您可以根据需要构建自己的配置,因为您将要传递可绑定的变量。
您必须遵循的约定的唯一对象是源和跟踪:
- 源:必须是具有两个属性(src和type)的对象数组(按优先顺序排列)。
- 轨道:必须是具有五个属性(src,kind,srclang,label和default)的对象数组。
该对象和属性名称与HTML5规范相同,因此应该很容易找到它们的工作方式。
除此之外,您还可以删除this.config并拥有this.sources,this.tracks,this.theme和this.poster,并且它们也都可以工作,因此您可以轻松创建自己想要的配置。
另外,您会看到源是使用$ sce .trustAsResourceUrl 创建的,它是为了警告AngularJS我们的视频是可信任的文件,并且加载它们没有问题。
创建您的HTML
在主体的HTML中添加所有依赖项后,就可以开始编写Videogular API提供的特殊标记。
但是首先我们需要实例化我们的应用程序和控制器:
1
2
3
4
5
|
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<!-- We will put here Videogular tags... -->
</div>
</div>
|
要开始使用Videogular,只需创建一个像这样的videogular标签:
1
2
3
4
5
6
7
8
9
|
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<videogular vg-theme="controller.config.theme">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks">
</vg-media>
</videogular>
</div>
</div>
|
在VG-媒体标签将创建一个视频源和轨道,我们有我们的绑定变量,我们在我们的控制器创建的,在这种情况下,config.sources和config.tracks。主题将添加到您的head标签的末尾。
现在,我们可以在vg-media标签下面添加插件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<videogular vg-theme="controller.config.theme">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks">
</vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
</div>
|
就这样。很简单,对不对?
现在,我们将看到如何使用CSS创建一个好的容器。
创建一个响应式容器
Videogular始终可以作为响应视频播放器。Videogular将其宽度和高度设置为100%,这将使您完全控制如何设置Videogular的大小。
例如,这就是您可以制作一个16:9宽高比的自适应容器的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
@media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
}
|
您只需要向您的div添加videogular-container类,我们就完成了!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-theme="controller.config.theme">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks">
</vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
</div>
|
恭喜你!您已成为第一位Videogular播放器!
如果您想了解有关Videogular API的更多信息,可以查看“ 示例”页面或docs。