diff --git a/ads/integration-guide.md b/ads/integration-guide.md
index d9e023a3d597..1b6650da3c4f 100644
--- a/ads/integration-guide.md
+++ b/ads/integration-guide.md
@@ -51,7 +51,7 @@ A brightcove player can be invoked by the following:
```
diff --git a/examples/brightcove.amp.html b/examples/brightcove.amp.html
index a67541bcc461..9cae365a6ea1 100644
--- a/examples/brightcove.amp.html
+++ b/examples/brightcove.amp.html
@@ -16,7 +16,7 @@ Brightcove Player
diff --git a/extensions/amp-brightcove/0.1/amp-brightcove.js b/extensions/amp-brightcove/0.1/amp-brightcove.js
index 6f158f2012c6..5b03a961668a 100644
--- a/extensions/amp-brightcove/0.1/amp-brightcove.js
+++ b/extensions/amp-brightcove/0.1/amp-brightcove.js
@@ -16,7 +16,8 @@
import {isLayoutSizeDefined} from '../../../src/layout';
import {loadPromise} from '../../../src/event-helper';
-
+import {addParamsToUrl} from '../../../src/url';
+import {dashToCamelCase} from '../../../src/string';
class AmpBrightcove extends AMP.BaseElement {
@@ -38,10 +39,14 @@ class AmpBrightcove extends AMP.BaseElement {
this.element.getAttribute('data-account'),
'The data-account attribute is required for %s',
this.element);
- const playerid = (this.element.getAttribute('data-player-id') || 'default');
+ const playerid = (this.element.getAttribute('data-player') ||
+ this.element.getAttribute('data-player-id') ||
+ 'default');
const embed = (this.element.getAttribute('data-embed') || 'default');
const iframe = document.createElement('iframe');
- let src = 'https://players.brightcove.net/' + encodeURIComponent(account) + '/' + encodeURIComponent(playerid) + '_' + encodeURIComponent(embed) + '/index.html';
+ let src = `https://players.brightcove.net/${encodeURIComponent(account)}/${encodeURIComponent(playerid)}_${encodeURIComponent(embed)}/index.html`;
+ const params = {};
+
if (this.element.getAttribute('data-playlist-id')) {
src += '?playlistId=';
src += this.encodeId_(this.element.getAttribute('data-playlist-id'));
@@ -49,6 +54,18 @@ class AmpBrightcove extends AMP.BaseElement {
src += '?videoId=';
src += this.encodeId_(this.element.getAttribute('data-video-id'));
}
+
+ // Pass through data-param-* attributes as params for plugin use
+ for (let i = 0; i < this.element.attributes.length; i++) {
+ const attr = this.element.attributes[i];
+ const matches = attr.nodeName.match(/^data-param-(.+)/);
+ if (matches) {
+ const param = dashToCamelCase(matches[1]);
+ params[param] = attr.nodeValue;
+ }
+ }
+
+ src = addParamsToUrl(src, params);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', 'true');
iframe.src = src;
@@ -66,7 +83,7 @@ class AmpBrightcove extends AMP.BaseElement {
/* id is either a Brightcove-assigned id, or a customer-generated reference id.
reference ids are prefixed 'ref:' and the colon must be preserved unencoded */
if (id.substring(0,4) === 'ref:') {
- return 'ref:' + encodeURIComponent(id.substring(4));
+ return `ref:${encodeURIComponent(id.substring(4))}`;
} else {
return encodeURIComponent(id);
}
diff --git a/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js b/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
index 663ade156d34..1739f5dbb034 100644
--- a/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
+++ b/extensions/amp-brightcove/0.1/test/test-amp-brightcove.js
@@ -17,20 +17,20 @@
import {createIframePromise} from '../../../../testing/iframe';
require('../amp-brightcove');
import {adopt} from '../../../../src/runtime';
+import {parseUrl} from '../../../../src/url';
adopt(window);
describe('amp-brightcove', () => {
- function getBrightcove(accountId, videoId, opt_responsive) {
+ function getBrightcove(attributes, opt_responsive) {
return createIframePromise().then(iframe => {
const bc = iframe.doc.createElement('amp-brightcove');
- bc.setAttribute('data-account', accountId);
+ for (const key in attributes) {
+ bc.setAttribute(key, attributes[key]);
+ }
bc.setAttribute('width', '111');
bc.setAttribute('height', '222');
- if (videoId) {
- bc.setAttribute('data-video-id', videoId);
- }
if (opt_responsive) {
bc.setAttribute('layout', 'responsive');
}
@@ -41,7 +41,10 @@ describe('amp-brightcove', () => {
}
it('renders', () => {
- return getBrightcove('906043040001','ref:ampdemo').then(bc => {
+ return getBrightcove({
+ 'data-account': '906043040001',
+ 'data-video-id': 'ref:ampdemo'
+ }).then(bc => {
const iframe = bc.querySelector('iframe');
expect(iframe).to.not.be.null;
expect(iframe.tagName).to.equal('IFRAME');
@@ -53,7 +56,10 @@ describe('amp-brightcove', () => {
});
it('renders responsively', () => {
- return getBrightcove('906043040001', 'ref:ampdemo', true).then(bc => {
+ return getBrightcove({
+ 'data-account': '906043040001',
+ 'data-video-id': 'ref:ampdemo'
+ }, true).then(bc => {
const iframe = bc.querySelector('iframe');
expect(iframe).to.not.be.null;
expect(iframe.className).to.match(/-amp-fill-content/);
@@ -61,7 +67,19 @@ describe('amp-brightcove', () => {
});
it('requires data-account', () => {
- return getBrightcove('').should.eventually.be.rejectedWith(
+ return getBrightcove({}).should.eventually.be.rejectedWith(
/The data-account attribute is required for/);
});
+
+ it('should pass data-param-* attributes to the iframe src', () => {
+ return getBrightcove({
+ 'data-account': '906043040001',
+ 'data-video-id': 'ref:ampdemo',
+ 'data-param-my-param': 'hello world'
+ }).then(bc => {
+ const iframe = bc.querySelector('iframe');
+ const params = parseUrl(iframe.src).search.split('&');
+ expect(params).to.contain('myParam=hello%20world');
+ });
+ });
});
diff --git a/extensions/amp-brightcove/amp-brightcove.md b/extensions/amp-brightcove/amp-brightcove.md
index 555d7bd53e44..ae1314fed4d3 100644
--- a/extensions/amp-brightcove/amp-brightcove.md
+++ b/extensions/amp-brightcove/amp-brightcove.md
@@ -16,13 +16,13 @@ limitations under the License.
### `amp-brightcove`
-An `amp-brightcove` component displays a Brightcove [Video Cloud](https://www.brightcove.com/en/online-video-platform) or [Perform](https://www.brightcove.com/en/perform) player.
+An `amp-brightcove` component displays the Brightcove Player as used in Brightcove's [Video Cloud](https://www.brightcove.com/en/online-video-platform) or [Perform](https://www.brightcove.com/en/perform) products.
Example:
```html