extensions/amp-jwplayer/1.0/README.md
Displays a cloud-hosted JW Player in an iframe.
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
npm install @bentoproject/jwplayer
import {defineElement as defineBentoJwplayer} from '@bentoproject/jwplayer';
defineBentoJwplayer();
<script><script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
/>
</head>
<body>
<bento-jwplayer
id="jwplayer"
data-player-id="BjcwyK37"
data-media-id="CtaIzmFs"
style="width: 480px; height: 270px"
></bento-jwplayer>
</body>
</html>
Bento components are highly interactive through their API. The bento-jwplayer component API is accessible by including the following script tag in your document:
await customElements.whenDefined('bento-jwplayer');
const jwplayerApi = await document.querySelector('bento-jwplayer').getApi();
You can use the API to trigger the available actions (play, pause, mute, unmute, requestFullscreen):
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
/>
</head>
<body>
<bento-jwplayer
id="jwplayer"
data-player-id="BjcwyK37"
data-media-id="CtaIzmFs"
style="width: 480px; height: 270px"
></bento-jwplayer>
<script>
(async () => {
const player = document.querySelector('#jwplayer');
await customElements.whenDefined('bento-jwplayer');
const api = player.getApi();
api.play();
api.pause();
api.mute();
api.unmute();
api.requestFullscreen();
})();
</script>
</body>
</html>
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
/>
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style>
bento-jwplayer {
display: block;
overflow: hidden;
position: relative;
}
/* Pre-upgrade: size-defining element - hide children. */
bento-jwplayer:not(.i-amphtml-built)
> :not([placeholder]):not([slot='i-amphtml-svc']) {
display: none;
content-visibility: hidden;
}
</style>
Keys and values will be URI encoded. Keys will be camel cased.
<ul>
<li><code>data-player-param-token="abc"</code> becomes <code>&token=abc</code></li>
<li><code>data-player-param-custom-data="key:value;key2:value2"</code> becomes <code>&customData=key%3Avalue%3Bkey2%3Avalue2</code></li>
</ul>
An alternative to using <code>data-player-querystring</code>.
</td>
See JW Player's <a href="https://support.jwplayer.com/articles/ad-tag-targeting-macro-reference">Ad Tag Targeting Macros</a> for more information.</td>
For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>
You may use the bento-jwplayer element selector to style the accordion freely.
npm install @bentoproject/jwplayer
import React from 'react';
import {BentoMathml} from '@bentoproject/jwplayer/react';
import '@bentoproject/jwplayer/styles.css';
function App() {
return (
<BentoJwplayer
playerId={'uoIbMPm3'}
mediaId={'BZ6tc0gy'}
style={{width: 480, height: 270}}
{...args}
></BentoJwplayer>
);
}
The BentoMathml component has a defined layout size type. To ensure the component renders correctly, be sure to apply a size to the component and its immediate children via a desired CSS layout (such as one defined with height, width, aspect-ratio, or other such properties). These can be applied inline:
<BentoMathml style={{width: 300, height: 100}}>...</BentoMathml>
Or via className:
<BentoMathml className="custom-styles">...</BentoMathml>
.custom-styles {
background-color: red;
width: '300px';
height: '100px';
}
See JW Player's <a href="https://support.jwplayer.com/articles/ad-tag-targeting-macro-reference">Ad Tag Targeting Macros</a> for more information.</td>
For more details, see <a href="https://amp.dev/documentation/components/amp-video-docking">documentation on the docking extension itself.</a></td>