ng-jwplayer
Angular Directive to instantiate a JWPlayer. Requires a license and JS package from http://www.jwplayer.com/
Installation
Assumes you have npm and bower installed
bower install ng-jwplayer --save
Usage
- Use the jwplayer.js that you downloaded from jwplayer.com, and then include in your html:
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<!-- Remplace xxxxxxxxx with your license code given by JWPLayer -->
<script src="https://content.jwplatform.com/libraries/xxxxxxxxxxxx.js"></script>
<script type="text/javascript" src="bower_components/ng-jwplayer/jwplayer.min.js"></script>
- Create all JWPLayer setup options as a object (see http://support.jwplayer.com/customer/portal/articles/1413113-configuration-options-reference). Add th video file as an ng-src
$scope.options = {
height: 360,
width: 640,
advertising: {
client: "vast",
tag: "http://adserver.com/vastTag.xml"
}
}
$scope.file: "http://example.com/myVideo.mp4",
- A sample script will look like this
var myApp = angular.module('myApp', ['ng-jwplayer']);
myApp.controller('mainController', ['$scope', '$log', '$sce', function($scope, $log, $sce) {
$scope.name = 'JWPlayer Example';
$scope.options = {
type: 'mp4',
image: 'http://example.com/myVideoPoster.jpg'
};
$scope.file = $sce.trustAsResourceUrl('http://example.com/myVideo.mp4');
// Optional: Catch ng-jwplayer event for when JWPlayer is ready
$scope.$on('ng-jwplayer-ready', function(event, args) {
$log.info('Player' + args.playerId + 'Ready.');
// Get player from service
var player = jwplayerService.myPlayer[args.playerId];
});
]);
- On your HTML, use the jwplayer directive:
<jwplayer ng-src="{{ file }}"
player-options="options"
player-id="myPlayer1">
</jwplayer>
- You can instanciate multiple players
<jwplayer ng-src="{{ file1 }}"
player-options="options1"
player-id="myPlayer1">
</jwplayer>
<jwplayer ng-src="{{ file2 }}"
player-options="options2"
player-id="myPlayer2">
</jwplayer>
Samples
- index1.html shows the most basic example for a single player
- index2.html shows how to instanciate two players on the same view
Version Changes
- 0.2.3 fix bower dependency to allow Angular>1.4
- 0.2.2 adds broadcast on player's setup-error
- 0.2.1 adds support for multiple players on same view. jwplayerService.myPlayer is now an object and requires the playerID as key
Contribute
To build, use
npm install
bower install
gulp
Inspired by ds62987/angular-jwplayer