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

现在，您已经加载了所有必需的脚本，我们可以开始编码了！

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

ng-app="myApp"> ng-controller="HomeCtrl as controller">

要开始使用Videogular，只需创建一个像这样的videogular标签：

XHTML

1 2 3 4 5 6 7 8 9

ng-app="myApp"> ng-controller="HomeCtrl as controller"> vg-theme="controller.config.theme"> vg-src="controller.config.sources" vg-tracks="controller.config.tracks">

在VG-媒体标签将创建一个视频源和轨道，我们有我们的绑定变量，我们在我们的控制器创建的，在这种情况下，config.sources和config.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

ng-app="myApp"> ng-controller="HomeCtrl as controller"> vg-theme="controller.config.theme"> vg-src="controller.config.sources" vg-tracks="controller.config.tracks">   {{ currentTime | date:'mm:ss' }} {{ timeLeft | date:'mm:ss' }}   vg-url='controller.config.plugins.poster'>

就这样。很简单，对不对？

现在，我们将看到如何使用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

ng-app="myApp"> ng-controller="HomeCtrl as controller" class="videogular-container"> vg-theme="controller.config.theme"> vg-src="controller.config.sources"   vg-tracks="controller.config.tracks">   {{ currentTime | date:'mm:ss' }} {{ timeLeft | date:'mm:ss' }}   vg-url='controller.config.plugins.poster'>

恭喜你！您已成为第一位Videogular播放器！

如果您想了解有关Videogular API的更多信息，可以查看“ 示例”页面或docs。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！