├── .gitignore ├── .idea ├── .name ├── anguvideo.iml ├── encodings.xml ├── inspectionProfiles │ ├── .xml │ ├── Project_Default.xml │ └── profiles_settings.xml ├── jsLinters │ ├── jshint.xml │ └── jslint.xml ├── misc.xml ├── modules.xml ├── scopes │ └── scope_settings.xml ├── vcs.xml └── workspace.xml ├── LICENSE ├── README.md ├── bower.json ├── index.html ├── js ├── anguvideo.js └── controller.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .gitignore support plugin (hsz.mobi) 2 | .idea/* 3 | .idea/misc.xml 4 | .idea/vcs.xml 5 | .idea/workspace.xml 6 | .idea/inspectionProfiles/* 7 | /bower_components/* 8 | projectFilesBackup/* 9 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | anguvideo -------------------------------------------------------------------------------- /.idea/anguvideo.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 125 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /.idea/jsLinters/jshint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /.idea/jsLinters/jslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /.idea/scopes/scope_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 16 | 17 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 91 | 92 | 98 | 99 | 100 | true 101 | 102 | 103 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | General 116 | 117 | 118 | XPath 119 | 120 | 121 | 122 | 123 | CoffeeScript 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | Dart 136 | 137 | 138 | EJS 139 | 140 | 141 | File Watchers 142 | 143 | 144 | Internationalization issues 145 | 146 | 147 | 148 | 149 | File Watchers 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 188 | 189 | 190 | 191 | 194 | 195 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 1402397648299 258 | 261 | 262 | 1403516722138 263 | 267 | 268 | 1403516816037 269 | 273 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 305 | 308 | 309 | 310 | 312 | 313 | 316 | 317 | 318 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Mariandi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-video 2 | ============= 3 | 4 | A directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it. 5 | 6 | ###Contributing 7 | angular-video is a free and open source library, and we appreciate any help you're willing to give. 8 | 9 | ### What it does 10 | * Converts any url into an embedded friendly url (according to vimeo's and youtube's preference) 11 | * Gets the trusted resource url using angular's trustAsResourceUrl() functionality 12 | 13 | ### Available url formats 14 | * http://www.youtube.com/watch?v=[xyzxyz] 15 | * http://youtu.be/[xyzxyz] 16 | * http://www.youtube.com/embed/[xyzxyz] 17 | * http://vimeo.com/[xyzxyz] 18 | 19 | ### Getting Started 20 | Download the code, and include the anguvideo.js file in your page. Then add the angvideo module to your Angular App file, e.g. 21 | ```html 22 | var app = angular.module('app', ["anguvideo"]); 23 | ``` 24 | 25 | ### Usage 26 | 27 | ```html 28 | 29 | ``` 30 | 31 | ```html 32 |

33 | ``` 34 | ### Description of attributes 35 | | Attribute | Description | Required | Example | 36 | | :------------- |:-------------| :-----:| :-----| 37 | | ngModel | An angular model containing the URL | Yes | $scope.URL | 38 | | width | The desired width of the video | No | 50% or 500px | 39 | | height | The desired height of the video | No | 400 | 40 | | hide-controls | Set to hide YouTube player controls | No | true | 41 | | auto-play | Set to autoplay video on web | No | true | 42 | | show-info | Set false to hide YouTube title | No | false | 43 | | rel | Set false to not show related videos | No | false | 44 | | modest-branding | Set to hide YouTube brand on controls bar | No | true | 45 | 46 | ### License 47 | The anguvideo project is covered by the [MIT License](http://opensource.org/licenses/MIT "MIT License"). 48 | 49 | The MIT License (MIT) 50 | 51 | Copyright (c) 2014 Mariandi Stylianou, and contributors to the angular-video project. 52 | 53 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "anguvideo", 3 | "version": "0.0.2", 4 | "main": "js/anguvideo.js", 5 | "dependencies": { 6 | "angular": "~1.2.16" 7 | }, 8 | "keywords": [ 9 | "video", 10 | "angularjs", 11 | "embedded", 12 | "directive", 13 | "youtube", 14 | "vimeo" 15 | ], 16 | "homepage": "https://github.com/andoulla/angular-video", 17 | "authors": [ 18 | "m.a.s" 19 | ], 20 | "description": "A directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it.", 21 | "license": "MIT", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | AngularJs Video Directive 5 | 6 | 7 |

8 |

anguVideo

9 |

10 | This is a directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it. 11 | 12 |

13 |

14 | Note: If an embedded friendly url is provided then the directive will simply gets the trusted resource url using angular's trustAsResourceUrl() functionality and then display the video 15 |

16 |

Url formats:

17 |

http://www.youtube.com/watch?v=[xyzxyz]
http://youtu.be/[xyzxyz]
http://www.youtube.com/embed/[xyzxyz]
http://vimeo.com/[xyzxyz]

23 | 24 |

Attributes

25 |

26 | width: width="[number]%" or width="[number]" - for px 27 |

28 | height: height="[number]" 29 |

30 |

31 | 32 |

YouTube Examples

33 |

34 | 35 |

36 |

37 |

38 | 39 |

40 | 41 |

42 |

43 | 44 | 45 |

Vimeo Examples

46 |

47 |

48 | 49 |

50 | 51 |

52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /js/anguvideo.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Mariandi on 11/03/2014. 3 | */ 4 | /*global angular*/ 5 | angular.module('anguvideo', []) 6 | .directive("anguvideo", ['$sce', function ($sce) { 7 | return { 8 | restrict: 'EA', 9 | scope: { 10 | source: '=ngModel', 11 | width: '@', 12 | height: '@' 13 | }, 14 | replace: true, 15 | template: '

' + 16 | '' + 17 | '

', 18 | link: function (scope, element, attrs) { 19 | var embedFriendlyUrl = "", 20 | urlSections, 21 | index; 22 | 23 | var youtubeParams = ''; 24 | if(attrs.hideControls==='true'){ youtubeParams += '?controls=0'; } 25 | if(attrs.autoPlay==='true'){ 26 | if(youtubeParams==''){youtubeParams += '?';} 27 | else{youtubeParams += '&';} 28 | youtubeParams += 'autoplay=0'; } 29 | if(attrs.showInfo==='false'){ 30 | if(youtubeParams==''){youtubeParams += '?';} 31 | else{youtubeParams += '&';} 32 | youtubeParams += 'showinfo=0'; } 33 | if(attrs.rel==='false'){ 34 | if(youtubeParams==''){youtubeParams += '?';} 35 | else{youtubeParams += '&';} 36 | youtubeParams += 'rel=0'; } 37 | if(attrs.modestBranding==='true'){ 38 | if(youtubeParams==''){youtubeParams += '?';} 39 | else{youtubeParams += '&';} 40 | youtubeParams += 'modestbranding=1'; } 41 | 42 | scope.$watch('source', function (newVal) { 43 | if (newVal) { 44 | /* 45 | * Need to convert the urls into a friendly url that can be embedded and be used in the available online players the services have provided 46 | * for youtube: src="//www.youtube.com/embed/{{video_id}}" 47 | * for vimeo: src="http://player.vimeo.com/video/{{video_id}} 48 | */ 49 | 50 | if (newVal.indexOf("vimeo") >= 0) { // Displaying a vimeo video 51 | if (newVal.indexOf("player.vimeo") >= 0) { 52 | embedFriendlyUrl = newVal; 53 | } else { 54 | embedFriendlyUrl = newVal.replace("http:", "https:"); 55 | urlSections = embedFriendlyUrl.split(".com/"); 56 | embedFriendlyUrl = embedFriendlyUrl.replace("vimeo", "player.vimeo"); 57 | embedFriendlyUrl = embedFriendlyUrl.replace("/" + urlSections[urlSections.length - 1], "/video/" + urlSections[urlSections.length - 1] + ""); 58 | } 59 | } else if (newVal.indexOf("youtu.be") >= 0) { 60 | 61 | index = newVal.indexOf(".be/"); 62 | 63 | embedFriendlyUrl = newVal.slice(index + 4, newVal.length); 64 | embedFriendlyUrl = "https://www.youtube.com/embed/" + embedFriendlyUrl + youtubeParams; 65 | } else if (newVal.indexOf("youtube.com") >= 0) { // displaying a youtube video 66 | if (newVal.indexOf("embed") >= 0) { 67 | embedFriendlyUrl = newVal + youtubeParams; 68 | } else { 69 | embedFriendlyUrl = newVal.replace("/watch?v=", "/embed/") + youtubeParams; 70 | if (embedFriendlyUrl.indexOf('m.youtube.com') != -1) { 71 | embedFriendlyUrl = embedFriendlyUrl.replace("m.youtube.com", "youtube.com"); 72 | } 73 | } 74 | } 75 | 76 | scope.url = $sce.trustAsResourceUrl(embedFriendlyUrl); 77 | } 78 | }); 79 | } 80 | }; 81 | }]); 82 | -------------------------------------------------------------------------------- /js/controller.js: -------------------------------------------------------------------------------- 1 | /*global angular*/ 2 | var myApp = angular.module("myApp", ["anguvideo"]); 3 | 4 | myApp.controller("AppCtrl", ['$scope', function ($scope) { 5 | $scope.youTubeURL = "http://www.youtube.com/watch?v=vabnZ9-ex7o"; 6 | $scope.youTubeShareURL = "http://youtu.be/5EVMjnHFg-w"; 7 | $scope.youTubeEmbededURL = "http://www.youtube.com/embed/u9hauSrihYQ"; 8 | $scope.vimeoURL = "http://vimeo.com/35514005"; 9 | }]); 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-video", 3 | "version": "0.0.2", 4 | "description": "A directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it.", 5 | "main": "js/anguvideo.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/andoulla/angular-video.git" 12 | }, 13 | "keywords": [ 14 | "video", 15 | "angularjs", 16 | "embedded", 17 | "directive", 18 | "youtube", 19 | "vimeo" 20 | ], 21 | "author": "m.a.s", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/andoulla/angular-video/issues" 25 | } 26 | } 27 | --------------------------------------------------------------------------------