/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

V id e o g u la...
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

Two Fucking Dev...
3
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

r a ú l
jim é n e z 

@elecash

@2fdevs

m a rc o s
g o...
4
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

angularjs

@2fdevs

http://twofuckingdevelopers.com

da...
5
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular

@2fdevs

http://twofuckingdevelopers.com

b...
6
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

videogular demo
bit.ly/1cmKI0k

http://twofuck...
7
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
how
it
works
videogular
vg-width
vg-height
v...
8
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

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

@...
9
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
bindable
properties
$watch
directive
dispatc...
10
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

w h y p lu g...
11
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com
12
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
adding
a plugin
directives
bindable propert...
13
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
components
inside
plugins
directives
bindab...
14
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
plugins
API
event-based
dependency injected...
15
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

videogular
API
events
list

@2fdevs

ON_PLAY
ON_PAUSE
...
16
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

videogular
 ...
17
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

http://twofuckingdevelopers.com

videogular
 ...
/18

Videogular: an AngularJS video player
TwoFuckingDevelopers

@2fdevs

Fin :-)
Thanks!
Questions?
@2fdevs
www.twofuckin...
Upcoming SlideShare
Loading in …5
×

Welovejs AngularJS

2,791 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,791
On SlideShare
0
From Embeds
0
Number of Embeds
1,555
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Welovejs AngularJS

  1. 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. 2. /18 Videogular: an AngularJS video player TwoFuckingDevelopers @2fdevs http://twofuckingdevelopers.com Two Fucking Developers
  3. 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. 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. 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. 6 /18 Videogular: an AngularJS video player TwoFuckingDevelopers @2fdevs videogular demo bit.ly/1cmKI0k http://twofuckingdevelopers.com
  7. 7. 7 /18 Videogular: an AngularJS video player TwoFuckingDevelopers videogular how it works videogular vg-width vg-height vg-theme @2fdevs http://twofuckingdevelopers.com <!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> <!-- Dependencies --> <script type=”text/javascript” src=”...”></script> <!-- Videogular files --> <script type=”text/javascript” src=”videogular.js”></script> <!-- App --> <script type=”text/javascript” src=“...”></script> </body> </html>
  8. 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. 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. 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!
  11. 11. 11 /18 Videogular: an AngularJS video player TwoFuckingDevelopers @2fdevs http://twofuckingdevelopers.com
  12. 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. 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. 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. 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. 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. 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. /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

×