@gkasev updated vjs to correctly return already created player when g…

…iven an element. closes #3006

CHANGELOG.md

@@ -2,7 +2,7 @@ CHANGELOG
 =========
 
 ## HEAD (Unreleased)
-_(none)_
+* @gkasev updated vjs to correctly return already created player when given an element ([view](https://github.com/videojs/video.js/pull/3006))
 
 --------------------
 

src/js/player.js

@@ -269,6 +269,7 @@ class Player extends Component {
     // Update tag id/class for use as HTML5 playback tech
     // Might think we should do this after embedding in container so .vjs-tech class
     // doesn't flash 100% width/height, but class only applies with .video-js parent
+    tag.playerId = tag.id;
     tag.id += '_html5_api';
     tag.className = 'vjs-tech';
 

src/js/video.js

@@ -52,8 +52,8 @@ if (typeof HTMLVideoElement === 'undefined') {
  * @mixes videojs
  * @method videojs
  */
-var videojs = function(id, options, ready){
-  var tag; // Element of ID
+let videojs = function(id, options, ready){
+  let tag; // Element of ID
 
   // Allow for element or ID to be passed in
   // String ID
@@ -95,7 +95,7 @@ var videojs = function(id, options, ready){
 
   // Element may have a player attr referring to an already created player instance.
   // If not, set up a new player and return the instance.
-  return tag['player'] || new Player(tag, options, ready);
+  return tag['player'] || Player.players[tag.playerId] || new Player(tag, options, ready);
 };
 
 // Add default styles

test/unit/video.test.js

@@ -30,6 +30,50 @@ test('should return a video player instance', function(){
   var playerAgain = videojs('test_vid_id');
   ok(player === playerAgain, 'did not create a second player from same tag');
 
+  equal(player, playerAgain, 'we did not make a new player');
+
+  var tag2 = document.getElementById('test_vid_id2');
+  var player2 = videojs(tag2, { techOrder: ['techFaker'] });
+  ok(player2.id() === 'test_vid_id2', 'created player from element');
+});
+
+test('should return a video player instance from el html5 tech', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  fixture.innerHTML += '<video id="test_vid_id"></video><video id="test_vid_id2"></video>';
+
+  var vid = document.querySelector('#test_vid_id');
+
+  var player = videojs(vid);
+  ok(player, 'created player from tag');
+  ok(player.id() === 'test_vid_id');
+  ok(videojs.getPlayers()['test_vid_id'] === player, 'added player to global reference');
+
+  var playerAgain = videojs(vid);
+  ok(player === playerAgain, 'did not create a second player from same tag');
+
+  equal(player, playerAgain, 'we did not make a new player');
+
+  var tag2 = document.getElementById('test_vid_id2');
+  var player2 = videojs(tag2, { techOrder: ['techFaker'] });
+  ok(player2.id() === 'test_vid_id2', 'created player from element');
+});
+
+test('should return a video player instance from el techfaker', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  fixture.innerHTML += '<video id="test_vid_id"></video><video id="test_vid_id2"></video>';
+
+  var vid = document.querySelector('#test_vid_id');
+
+  var player = videojs(vid, {techOrder: ['techFaker']});
+  ok(player, 'created player from tag');
+  ok(player.id() === 'test_vid_id');
+  ok(videojs.getPlayers()['test_vid_id'] === player, 'added player to global reference');
+
+  var playerAgain = videojs(vid);
+  ok(player === playerAgain, 'did not create a second player from same tag');
+
+  equal(player, playerAgain, 'we did not make a new player');
+
   var tag2 = document.getElementById('test_vid_id2');
   var player2 = videojs(tag2, { techOrder: ['techFaker'] });
   ok(player2.id() === 'test_vid_id2', 'created player from element');