Brightcove player component #1052
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!doctype html> | ||
| <html ⚡> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Brightcove Player Example</title> | ||
| <link rel="canonical" href="amps.html" > | ||
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
| <link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'> | ||
| <script async custom-element="amp-brightcove" src="/dist/v0/amp-brightcove-0.1.max.js"></script> | ||
| <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> | ||
| <script async src="https://cdn.ampproject.org/v0.js"></script> | ||
| </head> | ||
| <body> | ||
| <h2>Brightcove Player</h2> | ||
|
|
||
| <amp-brightcove | ||
| data-account="906043040001" | ||
| data-video-id="1401169490001" | ||
| data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c" | ||
| layout="responsive" width="480" height="270"> | ||
| </amp-brightcove> | ||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| /** | ||
| * Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS-IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import {isLayoutSizeDefined} from '../../../src/layout'; | ||
| import {loadPromise} from '../../../src/event-helper'; | ||
|
|
||
|
|
||
| class AmpBrightcove extends AMP.BaseElement { | ||
|
|
||
| /** @override */ | ||
| createdCallback() { | ||
| this.preconnect.url('https://players.brightcove.net'); | ||
| } | ||
|
|
||
| /** @override */ | ||
| isLayoutSupported(layout) { | ||
| return isLayoutSizeDefined(layout); | ||
| } | ||
|
|
||
| /** @override */ | ||
| layoutCallback() { | ||
| const width = this.element.getAttribute('width'); | ||
| const height = this.element.getAttribute('height'); | ||
| const account = AMP.assert( | ||
| this.element.getAttribute('data-account'), | ||
| 'The data-account attribute is required for <amp-brightcove> %s', | ||
| this.element); | ||
| const playerid = (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'; | ||
| if (this.element.getAttribute('data-playlist-id')) { | ||
| src += '?playlistId='; | ||
| src += this.encodeId_(this.element.getAttribute('data-playlist-id')); | ||
| } else if (this.element.getAttribute('data-video-id')) { | ||
| src += '?videoId='; | ||
| src += this.encodeId_(this.element.getAttribute('data-video-id')); | ||
| } | ||
| iframe.setAttribute('frameborder', '0'); | ||
| iframe.setAttribute('allowfullscreen', 'true'); | ||
| iframe.src = src; | ||
| this.applyFillContent(iframe); | ||
| iframe.width = width; | ||
| iframe.height = height; | ||
| this.element.appendChild(iframe); | ||
| /** @private {?Element} */ | ||
| this.iframe_ = iframe; | ||
| return loadPromise(iframe); | ||
| } | ||
|
|
||
| /** @private */ | ||
| encodeId_(id) { | ||
| /* 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)); | ||
| } else { | ||
| return encodeURIComponent(id); | ||
| } | ||
| } | ||
|
|
||
| /** @override */ | ||
| documentInactiveCallback() { | ||
| /* | ||
| This stops playback with the postMessage API. | ||
| Add this script to the player in the player configuration in the Studio | ||
| or via the Player Management API: | ||
|
|
||
| http://players.brightcove.net/906043040001/plugins/postmessage_pause.js | ||
|
|
||
| It's not a 'real' video.js plugin, just a plain script running in | ||
| the iframe so needs no configuration options. | ||
| */ | ||
| this.iframe_.contentWindow./*OK*/postMessage('pause', 'https://players.brightcove.net'); | ||
| return false; | ||
| } | ||
| }; | ||
|
|
||
| AMP.registerElement('amp-brightcove', AmpBrightcove); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /** | ||
| * Copyright 2015 The AMP HTML Authors. All Rights Reserved. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS-IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import {createIframePromise} from '../../../../testing/iframe'; | ||
| require('../amp-brightcove'); | ||
| import {adopt} from '../../../../src/runtime'; | ||
|
|
||
| adopt(window); | ||
|
|
||
| describe('amp-brightcove', () => { | ||
|
|
||
| function getBrightcove(accountId, videoId, opt_responsive) { | ||
| return createIframePromise().then(iframe => { | ||
| const bc = iframe.doc.createElement('amp-brightcove'); | ||
| bc.setAttribute('data-account', accountId); | ||
| bc.setAttribute('width', '111'); | ||
| bc.setAttribute('height', '222'); | ||
| if (videoId) { | ||
| bc.setAttribute('data-video-id', videoId); | ||
| } | ||
| if (opt_responsive) { | ||
| bc.setAttribute('layout', 'responsive'); | ||
| } | ||
| iframe.doc.body.appendChild(bc); | ||
| bc.implementation_.layoutCallback(); | ||
| return bc; | ||
| }); | ||
| } | ||
|
|
||
| it('renders', () => { | ||
| return getBrightcove('906043040001','ref:ampdemo').then(bc => { | ||
| const iframe = bc.querySelector('iframe'); | ||
| expect(iframe).to.not.be.null; | ||
| expect(iframe.tagName).to.equal('IFRAME'); | ||
| expect(iframe.src).to.equal( | ||
| 'https://players.brightcove.net/906043040001/default_default/index.html?videoId=ref:ampdemo'); | ||
| expect(iframe.getAttribute('width')).to.equal('111'); | ||
| expect(iframe.getAttribute('height')).to.equal('222'); | ||
| }); | ||
| }); | ||
|
|
||
| it('renders responsively', () => { | ||
| return getBrightcove('906043040001', 'ref:ampdemo', true).then(bc => { | ||
| const iframe = bc.querySelector('iframe'); | ||
| expect(iframe).to.not.be.null; | ||
| expect(iframe.className).to.match(/-amp-fill-content/); | ||
| }); | ||
| }); | ||
|
|
||
| it('requires data-account', () => { | ||
| return getBrightcove('').should.eventually.be.rejectedWith( | ||
| /The data-account attribute is required for/); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!--- | ||
| Copyright 2015 Brightcove. All Rights Reserved. | ||
|
|
||
| Licensed under the Apache License, Version 2.0 (the "License"); | ||
| you may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
|
|
||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
|
|
||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS-IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| --> | ||
|
|
||
| ### <a name="amp-brightcove"></a> `amp-brightcove` | ||
|
There was a problem hiding this comment. Could you please add a link to your extension here? https://github.com/ampproject/amphtml/blob/8e918dd48c7cee2de7b362633ea6b8dcba845e5a/extensions/README.md There was a problem hiding this comment. |
||
|
|
||
| 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. | ||
|
|
||
| Example: | ||
| ```html | ||
| <amp-brightcove | ||
| data-account="12345" | ||
| data-player="default" | ||
| data-embed="default" | ||
| data-video-id="1234" | ||
| layout="responsive" | ||
| width="480" height="270"> | ||
| </amp-brightcove> | ||
| ``` | ||
|
|
||
| The width and height will determine the aspect ratio of the player embed in responsive layouts. | ||
|
|
||
| #### Attributes | ||
|
|
||
| **data-account** | ||
|
|
||
| The Brightcove Video Cloud or Perform account id | ||
|
|
||
| **data-player** | ||
|
|
||
| The Brightcove player id. This is a GUID or "default". The default value is "default". | ||
|
|
||
| **data-embed** | ||
|
|
||
| The Brightcove player id. This is a GUID or "default". The default value and most common value is "default". | ||
|
|
||
| **data-video-id** | ||
|
|
||
| The Video Cloud video id. Most Video Cloud players will need this. | ||
| This is not used for Perform players. | ||
|
|
||
| **data-playlist-id** | ||
|
|
||
| The Video Cloud playlist id. For AMP HTML uses a video id will normally be used instead. If both a playlist and a video are specified, the playlist takes precedence. | ||
| This is not used for Perform players. | ||
|
|
||
| #### Player configuration | ||
|
|
||
| This script should be added to the configuration of Brightcove Players used with this component. This allows the AMP document to pause the player. Only the script need be added, no plugin name or JSON are needed. | ||
|
|
||
| * http://players.brightcove.net/906043040001/plugins/postmessage_pause.js | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please also whitelist your element in the https://github.com/ampproject/amphtml/blob/master/src/layout.js#L73 - it's a minor thing, but a good touch.