Your SlideShare is downloading. ×
0
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Welovejs AngularJS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Welovejs AngularJS

2,102

Published on

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

No Downloads
Views
Total Views
2,102
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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 /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!
  • 11. 11 /18 Videogular: an AngularJS video player TwoFuckingDevelopers @2fdevs http://twofuckingdevelopers.com
  • 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

×