I was trying to use <amp-brightcove> for displaying brightcove videos in AMP version of a site (Still a WIP). But when I tried to swap between showing brightcove video and image banner by hiding the brightcove video container to display image banner when an image tile is clicked by user and vice versa when a video tile is clicked.
While trying to implement the above through a state object as switch with the help of <amp-bind> component, at page load The brightcove loading gauge disappears quickly allowing access to video controls for the user to play the video. But once the user clicks on an image tile, the state object will be set to false, then the video container will be hidden by toggling a class name and the image container will be displayed.
While doing so, I can see the Iframe inside the brightcove container is removed and when the brightcove video container is set to display, iframe is injected back into <amp-brightcove> container. But this time hindering loading gauge does not goes off quickly and it keeps on loading even though the video behind is ready to play.
I tried to get rid of the loading gauge on brightcove container, but failed finding any option switch it off.
Tried a couple of workarounds as below:
- Tried hiding the loading gauge DIV through CSS (Unable to override amp CSS property using !important, as it is strictly prohibited by AMP),
- As the loading gauge was placed absolute to brightcove container, tried negating Z-Index value of the loading gauge element to -1, moving the loading element behind video container allowing access to video controls. Now I am able to access the video controls even if the loading gauge is not disabled.
I admit this is a hack, Please do let me know if there is any official way to disable the loading gauge element of brightcove in AMP. Here is a JS Fiddle or code snippet attached below, illustrating the issue.
Steps to repro:
- Open the snippet or fiddle and let it load
- Click on Hide video button to hide the video container
- Now click on Show video button to display the video container.
After the above steps, we may see the loading gauge hindering the video controls longer than expected.
<!--
## Introduction
The `amp-brightcove` component allows embedding a Brightcove
[Video Cloud](https://www.brightcove.com/en/online-video-platform) or
[Perform](https://www.brightcove.com/en/perform) player.
-->
<!-- -->
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>amp-brightcove</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- Import the Brightcove component in the header. -->
<script async="" custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="https://ampbyexample.com/components/amp-brightcove/">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>.showVid{display:block;}.hideVid{display:none;}</style>
</head>
<body>
<!-- ## Basic Usage -->
<!--
A responsive brightcove video. The required data is `data-account` and `data-video-id`. Other
supported parameters are `data-player-id`, `data-embed` and `data-playlist-id`.
-->
<amp-brightcove class = "showVid" [class] = "displayVid?'showVid':'hideVid'"
data-account="906043040001"
data-video-id="1401169490001"
data-player-id="180a5658-8be8-4f33-8eba-d562ab41b40c"
layout="responsive" width="480" height="270">
</amp-brightcove>
<button style="width:100px;height:50px;background:green" on="tap:AMP.setState({displayVid:true})">
Show video
</button>
<button style="width:100px;height:50px;background:Yellow" on="tap:AMP.setState({displayVid:false})">
Hide video
</button>
</body>
</html>
