Add a JWPlayer Adapter

rwlodkowski · Apr 15, 2014 · 3c786c5 · 3c786c5
1 parent 6ff9b95
commit 3c786c5
Show file tree

Hide file tree

Showing 5 changed files with 159 additions and 3 deletions.
diff --git a/src/adapters/jwplayer.js b/src/adapters/jwplayer.js
@@ -0,0 +1,119 @@
+/*globals playerjs:true*/
+
+//http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
+playerjs.JWPlayerAdapter = function(player){
+  if (!(this instanceof playerjs.JWPlayerAdapter)) {
+    return new playerjs.JWPlayerAdapter(player);
+  }
+  this.init(player);
+};
+
+playerjs.JWPlayerAdapter.prototype.init = function(player){
+
+  playerjs.assert(player, 'playerjs.JWPlayerAdapter requires a player object');
+
+  // Set up the actual receiver
+  var receiver = this.receiver = new playerjs.Receiver();
+
+  // JWPlayer doesn't have a seLoop, so we can do it ourself.
+  this.looped = false;
+
+  /* EVENTS */
+  player.onPause(function(){
+    receiver.emit('pause');
+  });
+
+  player.onPlay(function(){
+    receiver.emit('play');
+  });
+
+  player.onTime(function(e){
+    var seconds = e.position,
+      duration = e.duration;
+
+    if (!seconds || !duration){
+      return false;
+    }
+
+    var value = {
+      seconds: seconds,
+      duration: duration
+    };
+    receiver.emit('timeupdate', value);
+  });
+
+  var self = this;
+  player.onComplete(function(){
+    // Fake the looping
+    if (self.looped === true){
+      // By default jwplayer seeks after play.
+      player.seek(0);
+    } else {
+      // Else throw the ended event.
+      receiver.emit('ended');
+    }
+  });
+
+  player.onError(function(){
+    receiver.emit('error');
+  });
+
+
+  /* METHODS */
+  receiver.on('play', function(){
+    player.play(true);
+  });
+
+  receiver.on('pause', function(){
+    player.pause(true);
+  });
+
+  receiver.on('getPaused', function(callback){
+    callback(player.getState() !== 'PLAYING');
+  });
+
+  receiver.on('getCurrentTime', function(callback){
+    callback(player.getPosition());
+  });
+
+  receiver.on('setCurrentTime', function(value){
+    player.seek(value);
+  });
+
+  receiver.on('getDuration', function(callback){
+    callback(player.getDuration());
+  });
+
+  receiver.on('getVolume', function(callback){
+    callback(player.getVolume());
+  });
+
+  receiver.on('setVolume', function(value){
+    player.setVolume(value);
+  });
+
+  receiver.on('mute', function(){
+    player.setMute(true);
+  });
+
+  receiver.on('unmute', function(){
+    player.setMute(false);
+  });
+
+  receiver.on('getMuted', function(callback){
+    callback(player.getMute() === true);
+  });
+
+  receiver.on('getLoop', function(callback){
+    callback(this.looped);
+  }, this);
+
+  receiver.on('setLoop', function(value){
+    this.looped = value;
+  }, this);
+};
+
+/* Call when the video.js is ready */
+playerjs.JWPlayerAdapter.prototype.ready = function(){
+  this.receiver.ready();
+};
diff --git a/src/adapters/sublime.js b/src/adapters/sublime.js
@@ -29,7 +29,7 @@ playerjs.SublimeAdapter.prototype.methods = [
 
 playerjs.SublimeAdapter.prototype.init = function(player){
 
-  playerjs.assert(player, 'playerjs.VideoJSReceiver requires a player object');
+  playerjs.assert(player, 'playerjs.SublimeAdapter requires a player object');
 
   // Set up the actual receiver
   var receiver = this.receiver = new playerjs.Receiver(this.events, this.methods);

diff --git a/test/jwplayer.html b/test/jwplayer.html
@@ -0,0 +1,37 @@
+
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+  html,body {
+    padding:0;
+    margin:0;
+    width:100%;
+    height:100%;
+  }
+  </style>
+</head>
+<body>
+  <div id="video"></div>
+  <script src="http://jwpsrv.com/library/v71rLsS8EeOxRSIACi0I_Q.js"></script>
+  <script src="/dist/player.js"></script>
+
+  <script type="text/javascript">
+      jwplayer("video").setup({
+          file: "/lib/videos/demo.mp4",
+          height: '100%',
+          width: '100%'
+      });
+
+      var adapter = new playerjs.JWPlayerAdapter(jwplayer());
+
+      jwplayer().onReady(function(){
+        adapter.ready();
+      });
+  </script>
+
+  </script>
+</body>
+</html>
diff --git a/test/sublime.html b/test/sublime.html
@@ -2,7 +2,6 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
 </head>
 <body>
   <video id="video" class="sublime"

diff --git a/test/test.js b/test/test.js
@@ -3,7 +3,8 @@ var FRAMES = [
   'http://localhost.com:8003/test/mock.html',
   'http://localhost.com:8003/test/html.html',
   'http://localhost.com:8003/test/video.html',
-  'http://localhost.com:8003/test/sublime.html'
+  'http://localhost.com:8003/test/sublime.html',
+  'http://localhost.com:8003/test/jwplayer.html'
 ];
 
 var isNumber= function(obj){
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ @@
     <html>
     <head>
       <meta charset="utf-8">
-      <link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
     </head>
     <body>
       <video id="video" class="sublime"
@@ Expand Down @@