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="https://github.com/erost/ng-videosharing-embed/blob/master//vimeo.com/111690998"><a href="https://github.com/erost/ng-videosharing-embed/blob/master//vimeo.com/111690998">Watch</a></embed-video>

Test

Generic

<embed-video href="https://github.com/erost/ng-videosharing-embed/blob/master/<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="https://github.com/erost/ng-videosharing-embed/blob/master/{{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