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.

The examples below demonstrate use of the <bento-jwplayer> web component.

Example: Import via npm

[example preview="top-frame" playground="false"]

Install via npm:

npm install @ampproject/bento-jwplayer

import '@ampproject/bento-jwplayer';

[/example]

Example: Include via `<script>`

The example below contains an bento-jwplayer with three sections. The expanded attribute on the third section expands it on page load.

[example preview="top-frame" playground="false"]

<head>
  <script async src="https://cdn.ampproject.org/bento.js"></script>
  <script 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 twitter = document.querySelector('#jwplayer');
      await customElements.whenDefined('bento-twitter');

      const api = player.getApi()
      api.play();
      api.pause();
      api.mute();
      api.unmute();
      api.requestFullscreen();
    })()
  </script>

</body>

[/example]

Interactivity and API usage

Bento enabled components in standalone use 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-accordion');
const api = await document.querySelector('bento-accordion').getApi();

Layout and style

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 data-bento-boilerplate>
  amp-jwplayer {
    display: block;
    overflow: hidden;
    position: relative;
  }

  /* Pre-upgrade: size-defining element - hide children. */
  amp-jwplayer:not(.i-amphtml-built)
    > :not([placeholder]):not([slot='i-amphtml-svc']) {
    display: none;
    content-visibility: hidden;
  }
</style>

Attributes

data-player-id	JW Platform player id. This is an 8-digit alphanumeric sequence that can be found in the Players section in your JW Player Dashboard. (Required)
data-media-id	The JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the Content section in your JW Player Dashboard. (Required if `data-playlist-id` is not defined.). Note: `outstream` is also a valid value.
data-playlist-id	The JW Platform playlist id. This is an 8-digit alphanumeric sequence that can be found in the Playlists section in your JW Player Dashboard. If both `data-playlist-id` and `data-media-id` are specified, `data-playlist-id` takes precedence. (Required if `data-media-id` is not defined.)
data-content-search	Denotes the type of the playlist. If contextual article matching is desired, use the value `__CONTEXTUAL__`. If a search playlist is desired, input a keyword or phrase used to generate the search playlist.
data-content-backfill	Ensures that a search or contextual playlist always returns a result. If there are no relevant results for the given query, this parameter ensures that a list of trending videos are served instead. (Boolean with default: `true`)
data-player-querystring	A querystring of parameters that will be added to the player iframe src. This can be used for things like token signing.
data-player-param-*	An attribute that will be added as a query parameter to the player iframe src. Keys and values will be URI encoded. Keys will be camel cased. `data-player-param-token="abc"` becomes `&token=abc` `data-player-param-custom-data="key:value;key2:value2"` becomes `&customData=key%3Avalue%3Bkey2%3Avalue2` An alternative to using `data-player-querystring`.
data-ad-cust-params	A JSON string of custom parameters to add to ad tags. `data-ad-cust-params='{ "key1": "value" }'`
data-ad-macro-*	An attribute used to override the default value of macros in ad tags. Supported macros include: domain referrer page-url item-{custparam} item-{custparam}-list `data-ad-macro-domain="jwplayer.com"` would instead substitute "jwplayer.com" in for the `__domain__` macro. See JW Player's Ad Tag Targeting Macros for more information.
data-config-plugin-url	A url string used to pass external JS plugins to the player.
data-config-skin-url	A url string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information.
data-config-json	A JSON string of a player config. This can be used to set specific configuration properties on the player. `data-config-json='{"playbackRateControls":true,"displaytitle":false}'` Advertising configurations can also be specified using this. `data-config-json='{ "advertising": { "client": "vast", "schedule": [ { "tag": "http://adserver.com/vastTag.xml", "offset": "pre" } ] } }'` Media and Float on Scroll properties cannot be configured with this attribute. Update media properties in your JW Player Dashboard. See JW Player's Player Configuration Reference for more information.
autoplay	If this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, which are outlined in the Video in AMP spec.
dock	Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area. For more details, see documentation on the docking extension itself.

Styling

You may use the bento-jwplayer element selector to style the accordion freely.

Preact/React Component

The examples below demonstrates use of the <BentoMathml> as a functional component usable with the Preact or React libraries.

Example: Import via npm

[example preview="top-frame" playground="false"]

Install via npm:

npm install @ampproject/bento-jwplayer

import React from 'react';
import { BentoMathml } from '@ampproject/bento-jwplayer/react';
import '@ampproject/bento-jwplayer/styles.css';

function App() {
  return (
    <BentoJwplayer
      playerId={'uoIbMPm3'}
      mediaId={'BZ6tc0gy'}
      style={{width: 480, height: 270}}
      {...args}
    ></BentoJwplayer>
  );
}

[/example]

Layout and style

Container type

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: '300px', height: '100px'}}>
  ...
</BentoMathml>

Or via className:

<BentoMathml className='custom-styles'>
  ...
</BentoMathml>

.custom-styles {
  background-color: red;
  width: '300px';
  height: '100px';
}

Props

playerId	JW Platform player id. This is an 8-digit alphanumeric sequence that can be found in the Players section in your JW Player Dashboard. (Required)
mediaId	The JW Platform media id. This is an 8-digit alphanumeric sequence that can be found in the Content section in your JW Player Dashboard. (Required if `playlistId` is not defined.). Note: `outstream` is also a valid value.
playlistId	The JW Platform playlist id. This is an 8-digit alphanumeric sequence that can be found in the Playlists section in your JW Player Dashboard. If both `playlistId` and `mediaId` are specified, `playlist-id` takes precedence. (Required if `media-id` is not defined.)
contentSearch	Denotes the type of the playlist. If a search playlist is desired, input a keyword or phrase used to generate the search playlist.
contentBackfill	Ensures that a search or contextual playlist always returns a result. If there are no relevant results for the given query, this parameter ensures that a list of trending videos are served instead. (Boolean with default: `true`)
queryParams	A object of keys and values that should be appended to the player iframe src. This can be used for things like token signing. Keys and values will be URI encoded. Keys will be camel cased. `player-param-token="abc"` becomes `&token=abc` `player-param-custom-data="key:value;key2:value2"` becomes `&customData=key%3Avalue%3Bkey2%3Avalue2`
adCustParams	A JSON string of custom parameters to add to ad tags. `adCustParams={JSON.stringify({key1: "value"})}`
adMacros	A property used to override the default value of macros in ad tags. Supported macros include: domain referrer page-url item-{custparam} item-{custparam}-list `ad-macro-domain="jwplayer.com"` would instead substitute "jwplayer.com" in for the `__domain__` macro. See JW Player's Ad Tag Targeting Macros for more information.
config	An object to pass through various bits of configuration. Accepts A `skinUrl` string used to pass external CSS skins to the player. See JW Player's CSS Skin Reference for more information. Accepts a `pluginUrl` string used to pass external JS plugins to the player. Accepts a json property with a JSON string of a player config. This can be used to set specific configuration properties on the player. Advertising configurations can also be specified using this. `config={{ skinUrl: 'https://playertest.longtailvideo.com/skins/ethan.css', pluginUrl: 'https://playertest.longtailvideo.com/plugins/newsticker.js', json: { playbackRateControls: true, displaytitle: false, advertising: { client: "vast", schedule: [ { tag: "http://adserver.com/vastTag.xml", offset: "pre" } ] } } }}` Media and Float on Scroll properties cannot be configured with this attribute. Update media properties in your JW Player Dashboard. See JW Player's Player Configuration Reference for more information.
autoplay	If this attribute is present, and the browser supports autoplay, the video will be automatically played as soon as it becomes visible. There are some conditions that the component needs to meet to be played, which are outlined in the Video in AMP spec.
dock	Requires `amp-video-docking` extension. If this attribute is present and the video is playing manually, the video will be "minimized" and fixed to a corner or an element when the user scrolls out of the video component's visual area. For more details, see documentation on the docking extension itself.

FAQs

What is @ampproject/amp-jwplayer?

Is @ampproject/amp-jwplayer well maintained?

Package last updated on 22 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@ampproject/amp-jwplayer

Bento Jwplayer

Usage

Web Component

Example: Import via npm

Example: Include via <script>

Interactivity and API usage

Layout and style

Attributes

Styling

Preact/React Component

Example: Import via npm

Layout and style

Props

Related posts

npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects

Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm

Example: Include via `<script>`