diff --git a/3p/viqeoplayer.js b/3p/viqeoplayer.js
index 79bc71597bc2b..0b7f2397aebf5 100644
--- a/3p/viqeoplayer.js
+++ b/3p/viqeoplayer.js
@@ -13,35 +13,34 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-import {assertAbsoluteHttpOrHttpsUrl, tryDecodeUriComponent} from '../src/url';
import {getData} from '../src/event-helper';
import {loadScript} from './3p';
-import {parseJson} from '../src/json';
-import {setStyles} from '../src/style';
+import {tryDecodeUriComponent} from '../src/url';
/**
* @param {Window} global
- * @param {boolean} autoplay
* @param {Object} VIQEO
- * @param {function(Object)} VIQEO.getPlayers - returns viqeo player
- * @param {function(function(Object), Object)} VIQEO.subscribeTracking - subscriber
* @private
*/
-function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
- const {canonicalUrl, pageViewId} = global.context;
- VIQEO['setConfig']({url: canonicalUrl, amp: {pageViewId}});
+function viqeoPlayerInitLoaded(global, VIQEO) {
+ const {canonicalUrl, pageViewId, sourceUrl} = global.context;
+ const data = getData(global.context);
let viqeoPlayerInstance;
+ VIQEO['setConfig']({url: sourceUrl, amp: {pageViewId, canonicalUrl}});
+ VIQEO['subscribeTracking'](params => {
+ viqeoPlayerInstance = params['player'];
+ }, 'Player:added');
+ VIQEO['createPlayer']({
+ videoId: data['videoid'],
+ profileId: data['profileid'],
+ parent: global.document.getElementById('c'),
+ });
+
global.addEventListener('message', parseMessage, false);
- subscribe('added', 'ready', () => {
- const players = VIQEO['getPlayers']({container: 'stdPlayer'});
- viqeoPlayerInstance = players && players[0];
- });
- subscribe('started', 'started', () => {
- // if autoplay is off then player will be paused as it just has been started
- !autoplay && viqeoPlayerInstance && viqeoPlayerInstance.pause();
- });
+ subscribe('videoLoaded', 'ready');
+ subscribe('previewLoaded', 'ready');
+ subscribe('started', 'started');
subscribe('paused', 'pause');
subscribe('played', 'play');
subscribe('replayed', 'play');
@@ -54,19 +53,12 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
* Subscribe on viqeo's events
* @param {string} playerEventName
* @param {string} targetEventName
- * @param {function()|undefined|null} extraHandler
* @private
*/
- function subscribe(playerEventName, targetEventName, extraHandler = null) {
+ function subscribe(playerEventName, targetEventName) {
VIQEO['subscribeTracking'](
- () => {
- sendMessage(targetEventName);
- if (extraHandler) {
- extraHandler();
- }
- },
- {eventName: `Player:${playerEventName}`, container: 'stdPlayer'}
- );
+ () => { sendMessage(targetEventName); },
+ `Player:${playerEventName}`);
}
/**
@@ -79,7 +71,9 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
const name = params && params['trackingParams'] &&
params['trackingParams'].name;
const targetEventName = eventsDescription[name];
- sendMessage(targetEventName);
+ if (targetEventName) {
+ sendMessage(targetEventName);
+ }
}, 'Player:userAction');
}
@@ -123,17 +117,6 @@ function viqeoPlayerInitLoaded(global, autoplay, VIQEO) {
*/
export function viqeoplayer(global) {
const data = getData(global.context);
- let autoplay = false;
- try {
- autoplay = parseJson(global.name)['attributes']._context['autoplay'];
- } catch (e) {
- // do nothing
- }
- const videoId = data['videoid'];
- const profileId = data['profileid'];
-
- const markTagsAdvancedParams = data['tag-settings'];
-
const kindIsProd = data['data-kind'] !== 'stage';
let scriptPlayerInit = data['script-url'];
@@ -143,56 +126,11 @@ export function viqeoplayer(global) {
)
||
(kindIsProd
- ? 'https://cdn.viqeo.tv/js/vq_player_init.js?amp=true'
- : 'https://static.viqeo.tv/js/vq_player_init.js?branch=dev1&=true'
+ ? 'https://cdn.viqeo.tv/js/vq_starter.js'
+ : 'https://static.viqeo.tv/js/vq_player_init.js?branch=dev1'
);
- // embed preview url
- let previewUrl = data['player-url'];
- previewUrl =
- (previewUrl
- && previewUrl.length && decodeURI(previewUrl)
- )
- || (kindIsProd ? 'https://cdn.viqeo.tv/embed' : 'https://stage.embed.viqeo.tv');
-
- // Create preview iframe source path
- previewUrl = assertAbsoluteHttpOrHttpsUrl(
- `${previewUrl}/?vid=${videoId}&=true`);
- const doc = global.document;
- const mark = doc.createElement('div');
-
- const markTagsStyle = Object.assign({
- position: 'relative',
- width: '100%',
- height: '0',
- paddingBottom: '100%',
- }, markTagsAdvancedParams);
-
- setStyles(mark, markTagsStyle);
-
- mark.setAttribute('data-vnd', videoId);
- mark.setAttribute('data-profile', profileId);
- mark.classList.add('viqeo-embed');
-
- const iframe = doc.createElement('iframe');
-
- iframe.setAttribute('width', '100%');
- iframe.setAttribute('height', '100%');
- iframe.setAttribute('style', 'position: absolute');
- iframe.setAttribute('frameBorder', '0');
- iframe.setAttribute('allowFullScreen', '');
- iframe.src = previewUrl;
-
- mark.appendChild(iframe);
-
- doc.getElementById('c').appendChild(mark);
-
- loadScript(global, scriptPlayerInit, () => {
- if (!global['VIQEO']) {
- global['onViqeoLoad'] =
- viqeoPlayerInitLoaded.bind(null, global, autoplay);
- } else {
- viqeoPlayerInitLoaded(global, autoplay, global['VIQEO']);
- }
- });
+ global['onViqeoLoad'] = VIQEO =>
+ viqeoPlayerInitLoaded(global, VIQEO);
+ loadScript(global, scriptPlayerInit);
}
diff --git a/examples/viqeo.amp.html b/examples/viqeo.amp.html
index 8493019ad7aee..24ea5647357e8 100644
--- a/examples/viqeo.amp.html
+++ b/examples/viqeo.amp.html
@@ -73,7 +73,6 @@ Autoplay
width="640"
height="400"
data-profileid="184"
- data-tag-settings="paddingBottom:57%"
data-videoid="922d04f30b66f1a32eb2"
layout="responsive"
autoplay>
@@ -84,7 +83,6 @@ Without autoplay
width="640"
height="400"
data-profileid="184"
- data-tag-settings="paddingBottom:57%"
data-videoid="922d04f30b66f1a32eb2"
layout="responsive"
rotate-to-fullscreen>
diff --git a/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js b/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
index 585c9d9e29252..a04ce64c37ec4 100644
--- a/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
+++ b/extensions/amp-viqeo-player/0.1/amp-viqeo-player.js
@@ -62,6 +62,9 @@ class AmpViqeoPlayer extends AMP.BaseElement {
/** @private {boolean} */
this.hasAutoplay_ = false;
+
+ /** @private {string} */
+ this.videoId_ = '';
}
/**
@@ -69,8 +72,8 @@ class AmpViqeoPlayer extends AMP.BaseElement {
* @override
*/
preconnectCallback(opt_onLayout) {
- this.preconnect.url('https://static.viqeo.tv', opt_onLayout);
- this.preconnect.url('https://stage.embed.viqeo.tv', opt_onLayout);
+ this.preconnect.url('https://api.viqeo.tv', opt_onLayout);
+ this.preconnect.url('https://cdn.viqeo.tv', opt_onLayout);
}
/**
@@ -85,7 +88,7 @@ class AmpViqeoPlayer extends AMP.BaseElement {
/** @override */
buildCallback() {
- user().assert(
+ this.videoId_ = user().assert(
this.element.getAttribute('data-videoid'),
'The data-videoid attribute is required for %s',
this.element);
@@ -188,6 +191,26 @@ class AmpViqeoPlayer extends AMP.BaseElement {
return true; // Call layoutCallback again.
}
+ /** @override */
+ createPlaceholderCallback() {
+ const placeholder = this.element.ownerDocument.createElement('amp-img');
+ this.propagateAttributes(['aria-label'], placeholder);
+ if (placeholder.hasAttribute('aria-label')) {
+ placeholder.setAttribute('alt',
+ 'Loading video - ' + placeholder.getAttribute('aria-label')
+ );
+ } else {
+ placeholder.setAttribute('alt', 'Loading video');
+ }
+ placeholder.setAttribute('src',
+ `http://cdn.viqeo.tv/preview/${encodeURIComponent(this.videoId_)}.jpg`);
+ placeholder.setAttribute('layout', 'fill');
+ placeholder.setAttribute('placeholder', '');
+ placeholder.setAttribute('referrerpolicy', 'origin');
+ this.applyFillContent(placeholder);
+ return placeholder;
+ }
+
/** @override */
supportsPlatform() {
return true;
diff --git a/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js b/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
index 6a70e5b23c08e..def85544b807a 100644
--- a/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
+++ b/extensions/amp-viqeo-player/0.1/test/test-amp-viqeo-player.js
@@ -96,6 +96,21 @@ describes.realWin('amp-viqeo-player', {
});
+ describe('createPlaceholderCallback', () => {
+ it('should create a placeholder image', () => {
+ return getViqeo().then(p => {
+ const img = p.viqeoElement.querySelector('amp-img');
+ expect(img).to.not.be.null;
+ expect(img.getAttribute('src')).to.equal(
+ 'http://cdn.viqeo.tv/preview/922d04f30b66f1a32eb2.jpg');
+ expect(img.getAttribute('layout')).to.equal('fill');
+ expect(img.hasAttribute('placeholder')).to.be.true;
+ expect(img.getAttribute('referrerpolicy')).to.equal('origin');
+ expect(img.getAttribute('alt')).to.equal('Loading video');
+ });
+ });
+ });
+
function getViqeo(params) {
const {id, viqeoProfileId, viqeoId, width, height, opt_params} =
Object.assign({