@mister-ben updated language to inherit correctly and respect the attribute on the player. closes #3426

CHANGELOG.md

@@ -21,6 +21,7 @@ CHANGELOG
 * @misteroneill improved Logging for IE < 11 ([view](https://github.com/videojs/video.js/pull/3356))
 * @vdeshpande updated control text of modal dialog ([view](https://github.com/videojs/video.js/pull/3400))
 * @ldayananda fixed mouse handling on menus by using mouseleave over mouseout ([view](https://github.com/videojs/video.js/pull/3404))
+* @mister-ben updated language to inherit correctly and respect the attribute on the player ([view](https://github.com/videojs/video.js/pull/3426))
 
 --------------------
 

docs/guides/languages.md

@@ -131,14 +131,14 @@ During a Video.js player instantiation you can force it to localize to a specifi
 Determining Player Language
 ---------------------------
 
-The player language is set to one of the following in descending priority
+The player language is set to one of the following in descending priority:
 
-* The language set in setup options as above
-* The document language (`lang` attribute of the `html` element)
-* Browser language preference
+* The language specified in setup options as above
+* The language specified by the closet element with a `lang` attribute. This could be the player itself or a parent element. Usually the document language is specified on the `html` tag.
+* Browser language preference (the first language if more than one is configured)
 * 'en'
 
-That can be overridden after instantiation with `language('fr')`.
+The player language can be change after instantiation with `language('fr')`. However localizable text will not be modified by doing this, for best results set the language beforehand.
 
 Language selection
 ------------------

src/js/player.js

@@ -92,6 +92,25 @@ class Player extends Component {
     // see enableTouchActivity in Component
     options.reportTouchActivity = false;
 
+    // If language is not set, get the closest lang attribute
+    if (!options.language) {
+      if (typeof tag.closest === 'function') {
+        let closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      } else {
+        let element = tag;
+        while (element && element.nodeType === 1) {
+          if (Dom.getElAttributes(tag).hasOwnProperty('lang')) {
+            options.language = element.getAttribute('lang');
+            break;
+          }
+          element = element.parentNode;
+        }
+      }
+    }
+
     // Run base component initializing with new options
     super(null, options, ready);
 
@@ -2862,7 +2881,7 @@ Player.prototype.options_ = {
     'textTrackSettings'
   ],
 
-  language: document.getElementsByTagName('html')[0].getAttribute('lang') || navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
+  language: navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
 
   // locales and their language translations
   languages: {},

test/unit/player.test.js

@@ -839,6 +839,24 @@ expect(3);
   strictEqual(player.localize('Good'), 'Brilliant', 'Ignored case');
 });
 
+test('inherits language from parent element', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var oldLang = fixture.getAttribute('lang');
+  var player;
+
+  fixture.setAttribute('lang', 'x-test');
+  player = TestHelpers.makePlayer();
+
+  equal(player.language(), 'x-test', 'player inherits parent element language');
+
+  player.dispose();
+  if (oldLang) {
+    fixture.setAttribute('lang', oldLang);
+  } else {
+    fixture.removeAttribute('lang');
+  }
+});
+
 test('should return correct values for canPlayType', function(){
   var player = TestHelpers.makePlayer();