Welovejs AngularJS

Videogular: an AngularJS video playerTwoFuckingDevelopers/18

@2fdevs http://twofuckingdevelopers.comVideogular: an AngularJS video playerTwoFuckingDevelopers/18

@2fdevs http://twofuckingdevelopers.com

V i d e o g u l a r An HTML5 video player for AngularJS

WeLoveJS 26/10/2013

V i d e o g u l a r An HTML5 video player for AngularJS

WeLoveJS 26/10/2013




Two Fucking DevelopersTwo Fucking Developers



@2fdevs http://twofuckingdevelopers.com3

m a r c o s g o n z á le z @qmarcos

ra ú l jim é n e z

@elecash




data binding

routing

dependency injection

templating

modules

filtersmaintained by Google

angularjs

extend HTML and build web components!




bindable properties

it should extend HTML5 video capabilities.

themes

plugins and API

native fullscreen support

mobile support

library agnostic (next release)

videogular




videogular demo

bit.ly/1cmKI0k

videogular how

it works

7

videogular

vg-width

vg-height

vg-theme

<!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>

videogular themes

8

vg-theme

css-based

two-way binding

<!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 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></body></html>

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




videogular bindable

properties

9

$watch

directive

dispatch event

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.




w h y p l u g i n s ?

HTML5 poster attribute is cool!




videogular adding

a plugin

12

directives

bindable properties

core independant

<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.




videogular components

inside plugins

13

directives

bindable properties

plugin dependant

<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.




videogular plugins

API

14

event-based

dependency injected

extendable

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.




videogular API

events list

15

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




videogular fullscreen support

16

desktop

mobile

unsupported

fullscreen support... http://caniuse.com/fullscreen desktop support for Chrome, Firefox and Safari. 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”); }




videogular mobile support

17

mobile detection

fullscreen

controls

Videogular running on mobile devices · remove vg-width and vg-height to enter in responsive mode!! NEW! · 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”); };




Fin :-)Thanks! Questions?

Fin :-)Thanks! Questions?

@2fdevs

www.twofuckingdevelopers.comwww.twofuckingdevelopers.com

github.com/2fdevsgit.com

coderwall.com/2fdevsgit.com

Welovejs AngularJS

Technology

Transcript of Welovejs AngularJS