Welovejs AngularJS

/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

V id e o g u la r
An HTML5 video player for AngularJS

WeLoveJS

26/10/2013

/18


@2fdevs


Two Fucking Developers

3
/18


r a ú l
jim é n e z

@elecash

@2fdevs

m a rc o s
g o n z á le z

@qmarcos


4
/18


angularjs

@2fdevs


data binding
dependency injection
routing
templating
modules
filters
maintained by Google
extend HTML and build web components!

5
/18


videogular

@2fdevs


bindable properties
themes
plugins and API
native fullscreen support
mobile support
library agnostic (next release)
it should extend HTML5 video capabilities.

6
/18


@2fdevs

videogular demo
bit.ly/1cmKI0k


7
/18


videogular
how
it
works
videogular
vg-width
vg-height
vg-theme

@2fdevs


<!DOCTYPE html>
<html ng-app=”MyApp”>
<head>
<title>Videogular</title>
</head>
<body>
<div ng-controller=”MyAppController”>
<div videogular vg-width=”data.width” vg-height=”data.height” vg-theme=”theme.url”>
<video class=’videoPlayer’ preload=’metadata’>
<source src=”assets/videos/oceans-clip.mp4” type=”video/mp4”>
<source src=”assets/videos/oceans-clip.webm” type=”video/webm”>
<source src=”assets/videos/oceans-clip.ogv” type=”video/ogg”>
</video>
</div>
</div>


<script type=”text/javascript” src=”...”></script>


<script type=”text/javascript” src=”videogular.js”></script>


<script type=”text/javascript” src=“...”></script>

</body>
</html>

8
/18


videogular
themes
vg-theme
css-based
two-way binding

@2fdevs


<!DOCTYPE html>

<html ng-app=”MyApp”>

<head>
<link rel=”stylesheet” href=”themes/default/videogular.css”>
</head>

<body>


<div videogular vg-width=”data.width” vg-height=”data.height”
vg-theme=”theme.url” vg-autoplay=”data.autoPlay”>
</video>
</div>

</body>
</html>

when vg-theme is updated it removes previous theme and
injects the new one.

9
/18


videogular
bindable
properties
$watch
directive
dispatch event

@2fdevs


videogular.directive(”vgTheme”, function(VG_EVENTS) {
return {
restrict: “A”,
link: function (scope, elem, attrs) {
function updateTheme(value) {
//Inject theme and dispatch event
}

// More code...

if (attrs.vgTheme) {
if (attrs.vgTheme.indexOf(”.css”) < 0) {
scope.$watch(attrs.vgTheme, function(value) {
updateTheme(value);
});
}
else {
updateTheme(attrs.vgTheme);
}
}

}
}
}
);

we check if it’s a variable or a value to $watch or update.

10
/18


@2fdevs


w h y p lu g in s ?
HTML5 poster attribute is cool!

11
/18


@2fdevs


12
/18


videogular
adding
a plugin
directives
bindable properties
core independant

@2fdevs


<div vg-overlayPlay></div>

</video>
</div>

<script src=”js/vg/videogular.js” type=”text/javascript”></script>
<script src=”js/vg/plugins/overlayplay.js” type=”text/javascript”></script>

var videogularApp = angular.module(”videogularApp”, [
“MyAppController”,
“com.2fdevs.videogular”,
“com.2fdevs.videogular.plugins.overlayplay”
]
);

to add a plugin you only need to write it inside your
videogular tag, add the .js file and import the plugin.

13
/18


videogular
components
inside
plugins
directives
bindable properties
plugin dependant

@2fdevs


<div vg-controls vg-autohide=”data.autoHide” style=”height: 50px;”>
<div vg-playpauseButton></div>
<div vg-timeDisplay>{{ currentTime }}</div>
<div vg-scrubBar>
<div vg-scrubbarcurrenttime></div>
</div>
<div vg-timeDisplay>{{ totalTime }}</div>
<div vg-volume>
<div vg-mutebutton></div>
<div vg-volumebar></div>
</div>
<div vg-fullscreenButton></div>
</div>

</video>
</div>

you could write components inside plugins and they will
be encapsulated inside the plugin.

14
/18


videogular
plugins
API
event-based
dependency injected
extendable

@2fdevs


overLayPlay.directive(”vgOverlayplay”, function(VG_EVENTS){
....
function onClickOverlayPlay($event) {
scope.$emit(VG_EVENTS.ON_PLAY_PAUSE);
}

function onComplete(target, params) {
//Show plugin
}

elem.bind(”click”, onClickOverlayPlay);

scope.$on(VG_EVENTS.ON_COMPLETE, onComplete);
...
}

Videogular uses an event-based API to create plugins.

with $emit you can dispatch events to make others react
to your actions.

with $on you can react to events launched by other plugins
or by Videogular.

15
/18


videogular
API
events
list

@2fdevs

ON_PLAY
ON_PAUSE
ON_PLAY_PAUSE
ON_START_PLAYING
ON_COMPLETE
ON_SET_STATE
ON_SET_VOLUME
ON_TOGGLE_FULLSCREEN
ON_ENTER_FULLSCREEN
ON_EXIT_FULLSCREEN
ON_BUFFERING
ON_UPDATE_TIME
ON_SEEK_TIME
ON_UPDATE_SIZE
ON_UPDATE_THEME
ON_PLAYER_READY
ON_LOAD_POSTER


16
/18


@2fdevs


videogular
fullscreen support... http://caniuse.com/fullscreen

fullscreen
desktop support for Chrome, Firefox and Safari.
support
desktop
mobile
unsupported

mobile support for Chrome/Firefox for Android and iOS
fullscreen API.

future support for unsupported browsers like IE and
Android stock browser. http://youtube.com/html5

for now we just can detect if it has fullscreen support with
a custom polyfill

if (!window.fullScreenAPI) {
var fullScreenButton = angular.element(elem[0]);
fullScreenButton.css(”display”, “none”);
}

17
/18


@2fdevs


videogular
Videogular running on mobile devices

mobile
· remove vg-width and vg-height to enter in
responsive mode!! NEW!
support

mobile detection
fullscreen
controls

· only video object will be in fullscreen.

· hide volume controls, it doesn’t work on mobile.

· util function to detect if we’re in a mobile

if (VG_UTILS.isMobileDevice()) // do stuff...

this.isMobileDevice = function() {
return (typeof window.orientation !== “undefined”);
};

/18


@2fdevs

Fin :-)
Thanks!
Questions?
@2fdevs
www.twofuckingdevelopers.com
git.com
github.com/2fdevs
git.com
coderwall.com/2fdevs


Welovejs AngularJS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Welovejs AngularJS

Similar a Welovejs AngularJS (20)

Más de Tomas Corral Casas

Más de Tomas Corral Casas (9)

Último

Último (20)

Welovejs AngularJS