TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Welovejs AngularJS
1. /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
2. /18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
http://twofuckingdevelopers.com
Two Fucking Developers
3. 3
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
r a ú l
jim é n e z
@elecash
@2fdevs
m a rc o s
g o n z á le z
@qmarcos
http://twofuckingdevelopers.com
4. 4
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
angularjs
@2fdevs
http://twofuckingdevelopers.com
data binding
dependency injection
routing
templating
modules
filters
maintained by Google
extend HTML and build web components!
5. 5
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
@2fdevs
http://twofuckingdevelopers.com
bindable properties
themes
plugins and API
native fullscreen support
mobile support
library agnostic (next release)
it should extend HTML5 video capabilities.
6. 6
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
videogular demo
bit.ly/1cmKI0k
http://twofuckingdevelopers.com
8. 8
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
themes
vg-theme
css-based
two-way binding
@2fdevs
http://twofuckingdevelopers.com
<!DOCTYPE html>
<html ng-app=”MyApp”>
<head>
<link rel=”stylesheet” href=”themes/default/videogular.css”>
</head>
<body>
<!-- more code... -->
<div videogular vg-width=”data.width” vg-height=”data.height”
vg-theme=”theme.url” vg-autoplay=”data.autoPlay”>
<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>
<!-- more code... -->
</body>
</html>
when vg-theme is updated it removes previous theme and
injects the new one.
9. 9
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
bindable
properties
$watch
directive
dispatch event
@2fdevs
http://twofuckingdevelopers.com
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. 10
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
http://twofuckingdevelopers.com
w h y p lu g in s ?
HTML5 poster attribute is cool!
12. 12
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
adding
a plugin
directives
bindable properties
core independant
@2fdevs
http://twofuckingdevelopers.com
<div videogular vg-width=”data.width” vg-height=”data.height”
vg-theme=”theme.url” vg-autoplay=”data.autoPlay”>
<div vg-overlayPlay></div>
<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>
<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. 13
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
components
inside
plugins
directives
bindable properties
plugin dependant
@2fdevs
http://twofuckingdevelopers.com
<div videogular vg-width=”data.width” vg-height=”data.height”
vg-theme=”theme.url” vg-autoplay=”data.autoPlay”>
<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 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>
you could write components inside plugins and they will
be encapsulated inside the plugin.
14. 14
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
videogular
plugins
API
event-based
dependency injected
extendable
@2fdevs
http://twofuckingdevelopers.com
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. 15
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
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
http://twofuckingdevelopers.com
16. 16
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
http://twofuckingdevelopers.com
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. 17
/18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
http://twofuckingdevelopers.com
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. /18
Videogular: an AngularJS video player
TwoFuckingDevelopers
@2fdevs
Fin :-)
Thanks!
Questions?
@2fdevs
www.twofuckingdevelopers.com
git.com
github.com/2fdevs
git.com
coderwall.com/2fdevs
http://twofuckingdevelopers.com