❤
npm
Sign UpSign In

This package has been deprecated

Author message:

See @bentoproject/jwplayer

@ampproject/amp-jwplayer

1.2110011758.0 • Public • Published

Bento Jwplayer

Usage

Displays a cloud-hosted JW Player in an iframe.

Web Component

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @ampproject/amp-jwplayer

Repository

github.com/ampproject/amphtml

Homepage

github.com/ampproject/amphtml/tree/main/extensions/amp-jwplayer/1.0

Weekly Downloads

2

Version

1.2110011758.0

License

Apache-2.0

Unpacked Size

3.11 MB

Total Files

27

Last publish

Collaborators

  • alanorozco
  • amp-toolbox
  • ampproject-admin
  • ampprojectbot
  • caroqliu
  • choumx
  • dvoytenko
  • erwinmombay
  • esth
  • fstanis
  • jridgewell
  • kdwan
  • kristoferbaxter
  • patrickkettner
  • rsimha
  • samouri
Try on RunKit
Report malware