Angular Video Embed

A simple directive for angular 1.x that makes embedding videos from various services easier.

Currently supported:

• Viddler
• Vimeo
• Youtube

Installation

Install via npm - In the terminal:

npm install angular-video-embed --save

Include the module in your main app

angular.module('app', ['zen.video-embed']);

You must include the video service's library script in order to use that service

<!-- YOUTUBE -->
<script src="https://www.youtube.com/iframe_api"></script>

<!-- VIMEO -->
<script src="https://player.vimeo.com/api/player.js"></script>

<!-- VIDDLER -->
<script src="https://static.cdn-ec.viddler.com/js/arpeggio/v3/build/main-built.js"></script>

Usage

Loading a video

Method 1 - Passing an object

Javascript

$scope.video = {
	id: "49222355",
	service: "vimeo"
};

HTML

<div zen-video-embed video="video" style="width: 600px; height: 400px;"></div>

Method 2 - Passing a video URL

Javascript

$scope.url = "https://www.youtube.com/watch?v=iNJdPyoqt8U";

HTML

<div zen-video-embed url="{{url}}" style="width: 600px; height: 400px;"></div>

Registering event callbacks

Javascript

$scope.url = "https://www.youtube.com/watch?v=iNJdPyoqt8U";
$scope.onPlayed = function () {console.log("onPlayed fired");}
$scope.onPaused = function () {console.log("onPaused fired");}
$scope.onEnded = function () {console.log("onEnded fired");}
$scope.onBuffering = function () {console.log("onBuffering fired");} // Only supported on Youtube
$scope.onReady = function () {console.log("onReady fired");}

HTML

<div zen-video-embed url="{{url}}" on-played="onPlayed" on-paused="onPaused" on-ended="onEnded" on-buffering="onBuffering" on-ready="onReady" style="width: 600px; height: 400px;"></div>

Gaining access to the Player Library Instance

Javascript

// Each event callback receives a "Player Wrapper" instance which contains the underlying player library instance.
$scope.onReady = function (player) {
	if(player.video.service === "youtube") {
		player.player.setVolume(0);
	}
}

Contributing

Contributions are always welcome! If you would like to have another service added to the list please request it by opening up an issue or sending a pull request