Videogular 基础介绍

介绍

Videogular是AngularJS的HTML5视频播放器。我们正在开发专注于HTML5功能和移动设备的Videogular,因此我们不支持Flash,但是您可以开发一个插件并轻松提供后备支持

这是一个(从字面上)由两个Fucking Developers领导的小项目 ,还有其他一些视频播放器可能更适合您的项目。但是,如果您在项目中使用AngularJS,我们强烈建议您使用Videogular,因为它提供了可绑定的API。

这个怎么运作?

Videogular是HTML5视频标签的包装,因此您可以添加所需的任何内容。要创建播放器,您需要编写纯HTML,因此自定义视频播放器非常直观。Videogular的API提供了一些特殊的标记和属性来帮助您完成此过程。这为每个人提供了一个非常强大但易于使用的解决方案。

安装

我们建议使用  Node.js  和NPM安装Videogular。

 
 
 
 
 
Shell
 
1
npm install videogular

此外,您可以安装主题和几个插件:

 
 
 
 
 
Shell
 
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:

 
 
 
 
 
Shell
 
1
bower install videogular

使用Bower安装Videogular主题:

 
 
 
 
 
Shell
 
1
bower install videogular-themes-default

有了Videogular核心和主题,您就可以开始使用它了,但是建议您也安装一些可能对您有用的插件:

 
 
 
 
 
Shell
 
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:

 
 
 
 
 
Shell
 
1
2
3
bower install angular
 
bower install angular-sanitize

第一滴血!

好吧,让我们动手吧!

首先,按照以下顺序将JS文件放在您的身体末端:AngularJS,AngularJS Sanitize,Videogular和Videogular插件。

现在创建一个名为“ main.js”的JS文件,并将脚本放在正文的末尾,在其他脚本的下方。

应该是这样的:

 
 
 
 
 
XHTML
 
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”文件并添加以下代码:

 
 
 
 
 
JavaScript
 
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提供的特殊标记。

但是首先我们需要实例化我们的应用程序和控制器:

 
 
 
 
 
XHTML
 
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标签:

 
 
 
 
 
XHTML
 
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.sourcesconfig.tracks。主题将添加到您的head标签的末尾。

现在,我们可以在vg-media标签下面添加插件。

 
 
 
 
 
XHTML
 
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宽高比的自适应容器的方法。

 
 
 
 
 
CSS
 
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类,我们就完成了!

 
 
 
 
 
XHTML
 
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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值