diff --git a/examples/kaltura.amp.html b/examples/kaltura.amp.html new file mode 100644 index 000000000000..28a9b9b08fb6 --- /dev/null +++ b/examples/kaltura.amp.html @@ -0,0 +1,25 @@ + + + + + Kaltura Player Example + + + + + + + + +

Kaltura Player

+ + + + + + diff --git a/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js new file mode 100644 index 000000000000..70bf941c8ce1 --- /dev/null +++ b/extensions/amp-kaltura-player/0.1/amp-kaltura-player.js @@ -0,0 +1,133 @@ +/** + * Copyright 2016 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'; +import {addParamsToUrl} from '../../../src/url'; +import {dashToCamelCase} from '../../../src/string'; +import {setStyles} from '../../../src/style'; + +class AmpKaltura extends AMP.BaseElement { + + /** @override */ + createdCallback() { + this.preconnect.url('https://cdnapisec.kaltura.com'); + } + + /** @override */ + isLayoutSupported(layout) { + return isLayoutSizeDefined(layout); + } + + /** @override */ + buildCallback() { + if (!this.getPlaceholder()) { + this.buildImagePlaceholder_(); + } + } + + /** @override */ + layoutCallback() { + const width = this.element.getAttribute('width'); + const height = this.element.getAttribute('height'); + const partnerid = AMP.assert( + this.element.getAttribute('data-partner'), + 'The data-account attribute is required for %s', + this.element); + const uiconfid = this.element.getAttribute('data-uiconf') || + this.element.getAttribute('data-uiconf-id') || + 'default'; + const entryid = this.element.getAttribute('data-entryid') || 'default'; + const iframe = document.createElement('iframe'); + let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(partnerid)}/sp/${encodeURIComponent(partnerid)}00/embedIframeJs/uiconf_id/${encodeURIComponent(uiconfid)}/partner_id/${encodeURIComponent(partnerid)}?iframeembed=true&playerId=kaltura_player_amp&entry_id=${encodeURIComponent(entryid)}`; + const params = {}; + + // 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]); + const flashvar = 'flashvars[' + param + ']'; + params[flashvar] = attr.nodeValue; + } + } + + src = addParamsToUrl(src, params); + 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 */ + buildImagePlaceholder_() { + const imgPlaceholder = new Image(); + + setStyles(imgPlaceholder, { + 'object-fit': 'cover', + 'visibility': 'hidden', + }); + const width = this.element.getAttribute('width'); + const height = this.element.getAttribute('height'); + const partnerid = AMP.assert( + this.element.getAttribute('data-partner'), + 'The data-account attribute is required for %s', + this.element); + const entryid = this.element.getAttribute('data-entryid') || 'default'; + let src = `https://cdnapisec.kaltura.com/p/${encodeURIComponent(partnerid)}/thumbnail/entry_id/${encodeURIComponent(entryid)}`; + if (width) { + src += `/width/${width}`; + } + if (height) { + src += `/height/${height}`; + } + + imgPlaceholder.src = src; + imgPlaceholder.setAttribute('placeholder', ''); + imgPlaceholder.width = this.width_; + imgPlaceholder.height = this.height_; + + this.element.appendChild(imgPlaceholder); + this.applyFillContent(imgPlaceholder); + + loadPromise(imgPlaceholder).then(() => { + setStyles(imgPlaceholder, { + 'visibility': '', + }); + }); + } + + /** @override */ + documentInactiveCallback() { + if (this.iframe_ && this.iframe_.contentWindow) { + this.iframe_.contentWindow./*OK*/postMessage(JSON.stringify({ + 'method': 'pause' , + 'value': '' , + }) , '*'); + } + return false; + } + +}; + +AMP.registerElement('amp-kaltura-player', AmpKaltura); diff --git a/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js new file mode 100644 index 000000000000..0760a7b02577 --- /dev/null +++ b/extensions/amp-kaltura-player/0.1/test/test-amp-kaltura-player.js @@ -0,0 +1,89 @@ +/** + * Copyright 2016 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-kaltura-player'); +import {adopt} from '../../../../src/runtime'; +import {parseUrl} from '../../../../src/url'; + +adopt(window); + +describe('amp-kaltura-player', () => { + + function getKaltura(attributes, opt_responsive) { + return createIframePromise().then(iframe => { + const kalturaPlayer = iframe.doc.createElement('amp-kaltura-player'); + for (const key in attributes) { + kalturaPlayer.setAttribute(key, attributes[key]); + } + kalturaPlayer.setAttribute('width', '111'); + kalturaPlayer.setAttribute('height', '222'); + if (opt_responsive) { + kalturaPlayer.setAttribute('layout', 'responsive'); + } + iframe.doc.body.appendChild(kalturaPlayer); + kalturaPlayer.implementation_.layoutCallback(); + return kalturaPlayer; + }); + } + + it('renders', () => { + return getKaltura({ + 'data-partner': '1281471', + 'data-entryid': '1_3ts1ms9c', + 'data-uiconf': '33502051', + }).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://cdnapisec.kaltura.com/p/1281471/sp/128147100/embedIframeJs/uiconf_id/33502051/partner_id/1281471?iframeembed=true&playerId=kaltura_player_amp&entry_id=1_3ts1ms9c'); + expect(iframe.getAttribute('width')).to.equal('111'); + expect(iframe.getAttribute('height')).to.equal('222'); + }); + }); + + it('renders responsively', () => { + return getKaltura({ + 'data-partner': '1281471', + 'data-entryid': '1_3ts1ms9c', + 'data-uiconf': '33502051', + }, 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 getKaltura({}).should.eventually.be.rejectedWith( + /The data-account attribute is required for/); + }); + + // TODO(erwinm) unskip this when we figure out why it fails on travis + it.skip('should pass data-param-* attributes to the iframe src', () => { + return getKaltura({ + 'data-partner': '1281471', + 'data-entryid': '1_3ts1ms9c', + 'data-uiconf': '33502051', + 'data-param-my-param': 'hello world', + }).then(bc => { + const iframe = bc.querySelector('iframe'); + const params = parseUrl(iframe.src).search.split('&'); + expect(params).to.contain('flashvars[myParam]=hello%20world'); + }); + }); +}); diff --git a/extensions/amp-kaltura-player/amp-kaltura-player.md b/extensions/amp-kaltura-player/amp-kaltura-player.md new file mode 100644 index 000000000000..1788b15ee658 --- /dev/null +++ b/extensions/amp-kaltura-player/amp-kaltura-player.md @@ -0,0 +1,107 @@ + + +# `amp-kaltura-player` + + + + + + + + + + + + + + + + + + +
DescriptionAn amp-kaltura-player component displays the Kaltura Player as used in Kaltura's Video Platform.
AvailabilityStable
Required Script<script async custom-element="amp-kaltura-player" src="https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js"></script>
Examplesamp-kaltura-player.html
kaltura.amp.html
+ +The following lists validation errors specific to the `amp-kaltura-player` tag +(see also `amp-kaltura-player` in the [AMP validator specification](https://github.com/ampproject/amphtml/blob/master/validator/validator.protoascii)): + + + + + + + + + + + + + + + + + + + + + + + + + + +
Validation ErrorDescription
The 'example1' tag is missing or incorrect, but required by 'example2'.Error thrown when required amp-kaltura-player extension .js script tag is missing or incorrect.
The mandatory attribute 'example1' is missing in tag 'example2'.Error thrown when data-partner attribute is missing.
The implied layout 'example1' is not supported by tag 'example2'.Error thrown when implied layout is set to CONTAINER; this layout type isn't supported.
The specified layout 'example1' is not supported by tag 'example2'.Error thrown when specified layout is set to CONTAINER; this layout type isn't supported.
The property 'example1' in attribute 'example2' in tag 'example3' is set to 'example4', which is invalid.Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY.
+ +## Example + +The `width` and `height` attributes determine the aspect ratio of the player embedded in responsive layouts. + +Example: + +```html + + +``` + +## Attributes + +**data-partner** + +The Kaltura partner id. + +**data-uiconf** + +The Kaltura player id - uiconf id. + +**data-entryid** + +The Kaltura entry id. + + +**data-param-*** + +All `data-param-*` attributes will be added as query parameter to the player iframe src. This may be used to pass custom values through to player plugins, such as ad parameters or video ids for Perform players. + +Keys and values will be URI encoded. Keys will be camel cased. + +- `data-param-streamerType="auto"` becomes `&flashvars[streamerType]=auto` + + diff --git a/gulpfile.js b/gulpfile.js index 1f6c20b5067d..766af7444006 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -73,6 +73,7 @@ function buildExtensions(options) { buildExtension('amp-anim', '0.1', false, options); buildExtension('amp-audio', '0.1', false, options); buildExtension('amp-brightcove', '0.1', false, options); + buildExtension('amp-kaltura-player', '0.1', false, options); buildExtension('amp-carousel', '0.1', true, options); buildExtension('amp-dailymotion', '0.1', false, options); buildExtension('amp-dynamic-css-classes', '0.1', false, options); @@ -320,6 +321,7 @@ function buildExamples(watch) { buildExample('analytics.amp.html'); buildExample('article.amp.html'); buildExample('brightcove.amp.html'); + buildExample('kaltura.amp.html'); buildExample('responsive.amp.html'); buildExample('article-access.amp.html'); buildExample('dailymotion.amp.html');