@oat-sa/tao-core-ui 3.22.0 → 3.23.0

package/dist/mediaplayer/players/html5.js

@@ -1,4 +1,4 @@
-define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support', 'handlebars', 'lib/handlebars/helpers', 'ui/mediaplayer/utils/reminder', 'ui/mediaplayer/utils/timeObserver'], function ($$1, UrlParser, eventifier, support, Handlebars, Helpers0, reminderManagerFactory, timeObserverFactory) { 'use strict';
+define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support', 'handlebars', 'lib/handlebars/helpers', 'ui/mediaplayer/utils/reminder', 'ui/mediaplayer/utils/timeObserver', 'ui/mediaplayer/utils/crossOrigin'], function ($$1, UrlParser, eventifier, support, Handlebars, Helpers0, reminderManagerFactory, timeObserverFactory, crossOriginUtil) { 'use strict';
 
     $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
     UrlParser = UrlParser && Object.prototype.hasOwnProperty.call(UrlParser, 'default') ? UrlParser['default'] : UrlParser;
@@ -8,6 +8,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
     Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
     reminderManagerFactory = reminderManagerFactory && Object.prototype.hasOwnProperty.call(reminderManagerFactory, 'default') ? reminderManagerFactory['default'] : reminderManagerFactory;
     timeObserverFactory = timeObserverFactory && Object.prototype.hasOwnProperty.call(timeObserverFactory, 'default') ? timeObserverFactory['default'] : timeObserverFactory;
+    crossOriginUtil = crossOriginUtil && Object.prototype.hasOwnProperty.call(crossOriginUtil, 'default') ? crossOriginUtil['default'] : crossOriginUtil;
 
     if (!Helpers0.__initialized) {
       Helpers0(Handlebars);
@@ -16,16 +17,29 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
     var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
       this.compilerInfo = [4,'>= 1.0.0'];
     helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-      var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, self=this;
+      var buffer = "", stack1, helper, options, self=this, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
 
     function program1(depth0,data) {
       
       
-      return "crossorigin";
+      return " crossorigin=\"use-credentials\"";
       }
 
     function program3(depth0,data) {
       
+      var stack1;
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.crossOrigin), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
+      if(stack1 || stack1 === 0) { return stack1; }
+      else { return ''; }
+      }
+    function program4(depth0,data) {
+      
+      
+      return " crossorigin";
+      }
+
+    function program6(depth0,data) {
+      
       var buffer = "", stack1, helper, options;
       buffer += "\n    <a href=\"";
       if (helper = helpers.link) { stack1 = helper.call(depth0, {hash:{},data:data}); }
@@ -41,13 +55,13 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
       if (helper = helpers.preload) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.preload); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" controls ";
-      stack1 = helpers['if'].call(depth0, (depth0 && depth0.cors), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+        + "\" controls";
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.crossOriginUseCredentials), {hash:{},inverse:self.program(3, program3, data),fn:self.program(1, program1, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += ">\n    "
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Your browser doesn’t support the audio player.", options) : helperMissing.call(depth0, "__", "Your browser doesn’t support the audio player.", options)))
         + "\n";
-      stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n</audio>\n";
       return buffer;
@@ -64,16 +78,29 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
     var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
       this.compilerInfo = [4,'>= 1.0.0'];
     helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-      var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing, self=this;
+      var buffer = "", stack1, helper, options, self=this, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
 
     function program1(depth0,data) {
       
       
-      return "crossorigin";
+      return " crossorigin=\"use-credentials\"";
       }
 
     function program3(depth0,data) {
       
+      var stack1;
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.crossOrigin), {hash:{},inverse:self.noop,fn:self.program(4, program4, data),data:data});
+      if(stack1 || stack1 === 0) { return stack1; }
+      else { return ''; }
+      }
+    function program4(depth0,data) {
+      
+      
+      return " crossorigin";
+      }
+
+    function program6(depth0,data) {
+      
       var buffer = "", stack1, helper, options;
       buffer += "\n    <a href=\"";
       if (helper = helpers.link) { stack1 = helper.call(depth0, {hash:{},data:data}); }
@@ -93,13 +120,13 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
       if (helper = helpers.poster) { stack1 = helper.call(depth0, {hash:{},data:data}); }
       else { helper = (depth0 && depth0.poster); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
       buffer += escapeExpression(stack1)
-        + "\" controls ";
-      stack1 = helpers['if'].call(depth0, (depth0 && depth0.cors), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
+        + "\" controls";
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.crossOriginUseCredentials), {hash:{},inverse:self.program(3, program3, data),fn:self.program(1, program1, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += ">\n    "
         + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Your browser doesn’t support the video player.", options) : helperMissing.call(depth0, "__", "Your browser doesn’t support the video player.", options)))
         + "\n";
-      stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+      stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
       if(stack1 || stack1 === 0) { buffer += stack1; }
       buffer += "\n</video>\n";
       return buffer;
@@ -148,9 +175,9 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
      *
      * You should have received a copy of the GNU General Public License
      * along with this program; if not, write to the Free Software
-     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
      *
-     * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+     * Copyright (c) 2015-2026 (original work) Open Assessment Technologies SA ;
      */
 
     /**
@@ -191,6 +218,7 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
      * @param {string} [config.type] - The type of player (video or audio) (default: video)
      * @param {boolean} [config.preview] - Enables the media preview (load media metadata)
      * @param {boolean} [config.debug] - Enables the debug mode
+     * @param {'anonymous'|'use-credentials'} [config.crossOriginMode] - CORS credentials mode for cross-domain sources
      * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
      * @returns {object} player
      */
@@ -253,16 +281,12 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
         init() {
           const tpl = 'audio' === type ? audioTpl : videoTpl;
           const page = new UrlParser(window.location);
-          let cors = false;
           let preload = config.preview ? 'metadata' : 'none';
           let poster = '';
           let link = '';
           let result = false;
           state = {};
           sources.forEach(source => {
-            if (!page.sameDomain(source.src)) {
-              cors = true;
-            }
             if (source.poster) {
               poster = source.poster;
             }
@@ -270,8 +294,10 @@ define(['jquery', 'util/urlParser', 'core/eventifier', 'ui/mediaplayer/support',
               link = source.link;
             }
           });
+          const crossOriginAttr = crossOriginUtil.resolveCrossOriginAttribute(sources, config.crossOriginMode, page);
           $media = $$1(tpl({
-            cors,
+            crossOrigin: crossOriginAttr === 'anonymous',
+            crossOriginUseCredentials: crossOriginAttr === 'use-credentials',
             preload,
             poster,
             link

package/dist/mediaplayer/utils/crossOrigin.js

@@ -0,0 +1,64 @@
+define(function () { 'use strict';
+
+    /**
+     * This program is free software; you can redistribute it and/or
+     * modify it under the terms of the GNU General Public License
+     * as published by the Free Software Foundation; under version 2
+     * of the License (non-upgradable).
+     *
+     * This program is distributed in the hope that it will be useful,
+     * but WITHOUT ANY WARRANTY; without even the implied warranty of
+     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+     * GNU General Public License for more details.
+     *
+     * You should have received a copy of the GNU General Public License
+     * along with this program; if not, write to the Free Software
+     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+     *
+     * Copyright (c) 2026 (original work) Open Assessment Technologies SA ;
+     */
+
+    /** @typedef {'anonymous' | 'use-credentials'} CrossOriginMode */
+
+    const VALID_CROSS_ORIGIN_MODES = new Set(['anonymous', 'use-credentials']);
+
+    /**
+     * Normalises cross-origin mode from instance or RequireJS module config.
+     * @param {CrossOriginMode | string | undefined | null} instanceMode
+     * @param {CrossOriginMode | string | undefined | null} [moduleMode]
+     * @returns {CrossOriginMode}
+     */
+    function resolveCrossOriginMode(instanceMode, moduleMode) {
+      let mode = instanceMode;
+      if (typeof mode === 'undefined' || mode === null) {
+        mode = moduleMode;
+      }
+      if (typeof mode === 'undefined' || mode === null) {
+        mode = 'anonymous';
+      }
+      return VALID_CROSS_ORIGIN_MODES.has(mode) ? /** @type {CrossOriginMode} */mode : 'anonymous';
+    }
+
+    /**
+     * Resolves the crossorigin attribute for HTML5 media when sources are cross-domain.
+     * @param {Array<{ src?: string }>} sources
+     * @param {CrossOriginMode} crossOriginMode
+     * @param {{ sameDomain: (url: string) => boolean }} page
+     * @returns {CrossOriginMode | null} null when attribute should be omitted
+     */
+    function resolveCrossOriginAttribute(sources, crossOriginMode, page) {
+      const isCrossDomain = sources.some(source => source && source.src && !page.sameDomain(source.src));
+      if (!isCrossDomain) {
+        return null;
+      }
+      return resolveCrossOriginMode(crossOriginMode);
+    }
+    var crossOrigin = {
+      VALID_CROSS_ORIGIN_MODES,
+      resolveCrossOriginMode,
+      resolveCrossOriginAttribute
+    };
+
+    return crossOrigin;
+
+});

package/dist/mediaplayer.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/request', 'core/eventifier', 'core/mimetype', 'core/store', 'ui/mediaplayer/support', 'ui/mediaplayer/players', 'handlebars', 'lib/handlebars/helpers', 'css!ui/mediaplayer/css/player.css', 'nouislider'], function ($$1, _, async, UrlParser, request, eventifier, mimetype, store, support, players, Handlebars, Helpers0, player_css, nouislider) { 'use strict';
+define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/request', 'core/eventifier', 'core/mimetype', 'core/store', 'ui/mediaplayer/support', 'ui/mediaplayer/players', 'handlebars', 'lib/handlebars/helpers', 'ui/mediaplayer/utils/crossOrigin', 'module', 'css!ui/mediaplayer/css/player.css', 'nouislider'], function ($$1, _, async, UrlParser, request, eventifier, mimetype, store, support, players, Handlebars, Helpers0, crossOriginUtil, module, player_css, nouislider) { 'use strict';
 
     $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
     _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
@@ -12,6 +12,8 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
     players = players && Object.prototype.hasOwnProperty.call(players, 'default') ? players['default'] : players;
     Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
     Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;
+    crossOriginUtil = crossOriginUtil && Object.prototype.hasOwnProperty.call(crossOriginUtil, 'default') ? crossOriginUtil['default'] : crossOriginUtil;
+    module = module && Object.prototype.hasOwnProperty.call(module, 'default') ? module['default'] : module;
 
     if (!Helpers0.__initialized) {
       Helpers0(Handlebars);
@@ -80,6 +82,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
      *
      * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
      */
+    const moduleConfig = module.config ? module.config() : {};
 
     /**
      * CSS namespace
@@ -258,6 +261,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
      * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
      * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
      * @param {Boolean} [config.debug] - Enables the debug mode
+     * @param {'anonymous'|'use-credentials'} [config.crossOriginMode] - CORS credentials mode for cross-domain HTML5 sources (default: module config, then anonymous)
      * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
      * @event render - Event triggered when the player is rendering
      * @event error - Event triggered when the player throws an unrecoverable error
@@ -285,6 +289,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
           // load the config set, discard null values in order to allow defaults to be set
           this.config = _.omitBy(mediaPlayerConfig || {}, value => typeof value === 'undefined' || value === null);
           _.defaults(this.config, defaults.options);
+          this.config.crossOriginMode = crossOriginUtil.resolveCrossOriginMode(this.config.crossOriginMode, moduleConfig.crossOriginMode);
           if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
             this.config.mimeType = this.config.type;
           }
@@ -834,6 +839,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
                 sources: this.getSources(),
                 preview: this.config.preview,
                 debug: this.config.debug,
+                crossOriginMode: this.config.crossOriginMode,
                 stalledDetectionDelay: this.config.stalledDetectionDelay
               };
               this.player = playerFactory(this.$player, playerConfig).on('resize', (width, height) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.22.0",
+    "version": "3.23.0",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/src/mediaplayer/players/html5.js

@@ -11,9 +11,9 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ * Foundation, Inc., 31 Milk St # 960789 Boston, MA 02196 USA.
  *
- * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
+ * Copyright (c) 2015-2026 (original work) Open Assessment Technologies SA ;
  */
 
 import $ from 'jquery';
@@ -25,6 +25,7 @@ import videoTpl from 'ui/mediaplayer/tpl/video';
 import sourceTpl from 'ui/mediaplayer/tpl/source';
 import reminderManagerFactory from 'ui/mediaplayer/utils/reminder';
 import timeObserverFactory from 'ui/mediaplayer/utils/timeObserver';
+import crossOriginUtil from 'ui/mediaplayer/utils/crossOrigin';
 
 /**
  * CSS namespace
@@ -91,6 +92,7 @@ const playerEvents = ['end', 'error', 'pause', 'play', 'playing', 'ready', 'resi
  * @param {string} [config.type] - The type of player (video or audio) (default: video)
  * @param {boolean} [config.preview] - Enables the media preview (load media metadata)
  * @param {boolean} [config.debug] - Enables the debug mode
+ * @param {'anonymous'|'use-credentials'} [config.crossOriginMode] - CORS credentials mode for cross-domain sources
  * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
  * @returns {object} player
  */
@@ -161,7 +163,6 @@ export default function html5PlayerFactory($container, config = {}) {
         init() {
             const tpl = 'audio' === type ? audioTpl : videoTpl;
             const page = new UrlParser(window.location);
-            let cors = false;
             let preload = config.preview ? 'metadata' : 'none';
             let poster = '';
             let link = '';
@@ -170,9 +171,6 @@ export default function html5PlayerFactory($container, config = {}) {
             state = {};
 
             sources.forEach(source => {
-                if (!page.sameDomain(source.src)) {
-                    cors = true;
-                }
                 if (source.poster) {
                     poster = source.poster;
                 }
@@ -181,7 +179,19 @@ export default function html5PlayerFactory($container, config = {}) {
                 }
             });
 
-            $media = $(tpl({ cors, preload, poster, link }));
+            const crossOriginAttr = crossOriginUtil.resolveCrossOriginAttribute(
+                sources,
+                config.crossOriginMode,
+                page
+            );
+
+            $media = $(tpl({
+                crossOrigin: crossOriginAttr === 'anonymous',
+                crossOriginUseCredentials: crossOriginAttr === 'use-credentials',
+                preload,
+                poster,
+                link
+            }));
             $container.append($media);
 
             applyVideoSizing();

package/src/mediaplayer/readme.md

@@ -24,6 +24,7 @@ require(['ui/mediaplayer'], function(mediaplayer) {
 - *Number* **volume** - Sets the sound volume (default: 80)
 - *Number* **width** - Sets the width of the player (default: depends on media type)
 - *Number* **height** - Sets the height of the player (default: depends on media type)
+- *String* **crossOriginMode** - CORS mode for cross-domain HTML5 sources: `anonymous` (default, bare `crossorigin`) or `use-credentials` (`crossorigin="use-credentials"`)
 - *Function* **onrender** - Event listener called when the player is rendering
 - *Function* **onready** - Event listener called when the player is fully ready
 - *Function* **onplay** - Event listener called when the playback is starting
@@ -33,6 +34,22 @@ require(['ui/mediaplayer'], function(mediaplayer) {
 - *Function* **onlimitreached** - Event listener called when the play limit has been reached
 - *Function* **ondestroy** - Event listener called when the player is destroying
 
+### Module configuration
+
+Set a default `crossOriginMode` for all player instances via RequireJS:
+
+```javascript
+require.config({
+    config: {
+        'ui/mediaplayer': {
+            crossOriginMode: 'use-credentials'
+        }
+    }
+});
+```
+
+Per-instance `crossOriginMode` overrides the module default.
+
 ### Events
 
 Some events are triggered both on the component using `eventifier` and on the DOM through the component wrapper.

package/src/mediaplayer/tpl/audio.tpl

@@ -1,4 +1,4 @@
-<audio class="media audio" preload="{{preload}}" controls {{#if cors}}crossorigin{{/if}}>
+<audio class="media audio" preload="{{preload}}" controls{{#if crossOriginUseCredentials}} crossorigin="use-credentials"{{else}}{{#if crossOrigin}} crossorigin{{/if}}{{/if}}>
     {{__ 'Your browser doesn’t support the audio player.'}}
 {{#if link}}
     <a href="{{link}}">{{__ 'Please download the track and listen offline.'}}</a>

package/src/mediaplayer/tpl/video.tpl

@@ -1,4 +1,4 @@
-<video class="media video" preload="{{preload}}" poster="{{poster}}" controls {{#if cors}}crossorigin{{/if}}>
+<video class="media video" preload="{{preload}}" poster="{{poster}}" controls{{#if crossOriginUseCredentials}} crossorigin="use-credentials"{{else}}{{#if crossOrigin}} crossorigin{{/if}}{{/if}}>
     {{__ 'Your browser doesn’t support the video player.'}}
 {{#if link}}
     <a href="{{link}}">{{__ 'Please download the video and view offline.'}}</a>

package/src/mediaplayer/utils/crossOrigin.js

@@ -0,0 +1,63 @@
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2026 (original work) Open Assessment Technologies SA ;
+ */
+
+/** @typedef {'anonymous' | 'use-credentials'} CrossOriginMode */
+
+const VALID_CROSS_ORIGIN_MODES = new Set(['anonymous', 'use-credentials']);
+
+/**
+ * Normalises cross-origin mode from instance or RequireJS module config.
+ * @param {CrossOriginMode | string | undefined | null} instanceMode
+ * @param {CrossOriginMode | string | undefined | null} [moduleMode]
+ * @returns {CrossOriginMode}
+ */
+function resolveCrossOriginMode(instanceMode, moduleMode) {
+    let mode = instanceMode;
+
+    if (typeof mode === 'undefined' || mode === null) {
+        mode = moduleMode;
+    }
+    if (typeof mode === 'undefined' || mode === null) {
+        mode = 'anonymous';
+    }
+
+    return VALID_CROSS_ORIGIN_MODES.has(mode) ? /** @type {CrossOriginMode} */ (mode) : 'anonymous';
+}
+
+/**
+ * Resolves the crossorigin attribute for HTML5 media when sources are cross-domain.
+ * @param {Array<{ src?: string }>} sources
+ * @param {CrossOriginMode} crossOriginMode
+ * @param {{ sameDomain: (url: string) => boolean }} page
+ * @returns {CrossOriginMode | null} null when attribute should be omitted
+ */
+function resolveCrossOriginAttribute(sources, crossOriginMode, page) {
+    const isCrossDomain = sources.some(source => source && source.src && !page.sameDomain(source.src));
+
+    if (!isCrossDomain) {
+        return null;
+    }
+
+    return resolveCrossOriginMode(crossOriginMode);
+}
+
+export default {
+    VALID_CROSS_ORIGIN_MODES,
+    resolveCrossOriginMode,
+    resolveCrossOriginAttribute
+};

package/src/mediaplayer.js

@@ -27,9 +27,13 @@ import store from 'core/store';
 import support from 'ui/mediaplayer/support';
 import players from 'ui/mediaplayer/players';
 import playerTpl from 'ui/mediaplayer/tpl/player';
+import crossOriginUtil from 'ui/mediaplayer/utils/crossOrigin';
+import module from 'module';
 import 'ui/mediaplayer/css/player.css';
 import 'nouislider';
 
+const moduleConfig = module.config ? module.config() : {};
+
 /**
  * CSS namespace
  * @type {String}
@@ -212,6 +216,7 @@ const isResponsiveSize = sizeProps => {
  * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
  * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
  * @param {Boolean} [config.debug] - Enables the debug mode
+ * @param {'anonymous'|'use-credentials'} [config.crossOriginMode] - CORS credentials mode for cross-domain HTML5 sources (default: module config, then anonymous)
  * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
  * @event render - Event triggered when the player is rendering
  * @event error - Event triggered when the player throws an unrecoverable error
@@ -239,6 +244,10 @@ function mediaplayerFactory(config) {
             // load the config set, discard null values in order to allow defaults to be set
             this.config = _.omitBy(mediaPlayerConfig || {}, value => typeof value === 'undefined' || value === null);
             _.defaults(this.config, defaults.options);
+            this.config.crossOriginMode = crossOriginUtil.resolveCrossOriginMode(
+                this.config.crossOriginMode,
+                moduleConfig.crossOriginMode
+            );
             if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
                 this.config.mimeType = this.config.type;
             }
@@ -882,6 +891,7 @@ function mediaplayerFactory(config) {
                         sources: this.getSources(),
                         preview: this.config.preview,
                         debug: this.config.debug,
+                        crossOriginMode: this.config.crossOriginMode,
                         stalledDetectionDelay: this.config.stalledDetectionDelay
                     };
                     this.player = playerFactory(this.$player, playerConfig)