ngJWPlayer

KO | EN

gitlite — search

#javascript #python #go #machine-learning #docker #macos #nodejs #windows #awesome #kubernetes #vue #pytorch #security #open-source

(★ 12)

Angular directives to instanciate a jwPlayer

ngJWPlayer Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ng-jwplayer

Angular Directive to instantiate a JWPlayer. Requires a license and JS package from http://www.jwplayer.com/

### Installation

Use bower:

~~~~
bower install ng-jwplayer --save
~~~~

or NPM

~~~~
npm 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>

<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

ngJWPlayer

ngJWPlayer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ngJWPlayer

ngJWPlayer Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README