-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
22 changed files
with
508 additions
and
80 deletions.
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
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` | ||
|
|
||
| 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
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
Oops, something went wrong.