ng-videosharing-embed
Embed videos using AngularJS directives
Purpose
A small project I've started while learning angularJS. It has no real purpose other than educational.
Examples
http://erost.net/ng-videosharing-embed/
Usage
Install
$ bower install ng-videosharing-embed
$ npm install ng-videosharing-embed
Once installed, add videosharing-embed as a dependency in your module:
angular.module('myModule', ['videosharing-embed']);
Requirements
- AngularJS v1.2.0+ is supported
Supported Video Sources
- Youtube (standard and nocookies, iframe, JS API support)
- Dailymotion (iframe, JS API support)
- Vimeo (iframe, JS API support)
- Youku (iframe, tentative)
- Vine (iframe, with embed script)
Note on JS API:
Each iframe should be identified with a unique id. That ID can be configured by iframe-id
Example
<embed-video iframe-id="vimeo1" api="1" player_id="vimeo1" ng-href="//vimeo.com/111690998"><a href="//vimeo.com/111690998">Watch</a></embed-video>
Test
Generic
<embed-video href="<videoUrl>" width=xxx height=xxx [force-protocol="ANY"] [options]></embed-video>
Example
<embed-video data-ng-href="http://www.youtube.com/watch?v=LOKyEt36Kjc" controls=0><a href="http://www.youtube.com/watch?v=LOKyEt36Kjc">Watch</a></embed-video>
Example protocol override (note without ':')
<embed-video data-ng-href="http://www.youtube.com/watch?v=LOKyEt36Kjc" force-protocol="https" controls=0><a href="http://www.youtube.com/watch?v=LOKyEt36Kjc">Watch</a></embed-video>
Callback example
<embed-video data-ng-href="{{videoUrl}}" on-change="videoSelected(videoId, provider)" controls=0><a href="http://www.youtube.com/watch?v=LOKyEt36Kjc">Watch</a></embed-video>
...
$scope.videoSelected = function(videoId, provider) {
if (videoId) {
console.log("Video from " + provider + " with id " + videoId + " was selected");
} else {
console.log("No valid URL entered");
}
}
...
Player's options are unique for each video source. For a list of available options, take a look at src/angular-embedplayer.js, or the player official documentation