Bento

Bento Jwplayer

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <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"
      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"
    />
    <style>
      body {
        background: #ecf1f3;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
</head>

<body>

    <bento-jwplayer
      id="jwplayer"
      data-player-id="BjcwyK37"
      data-media-id="CtaIzmFs"
      style="width: 480px; height: 270px"
    ></bento-jwplayer>
</body>

在 iframe 中显示云托管的 JW Player。

将 bento-jwplayer 用作 Web 组件或 React 函数组件

↓ Web 组件 ↓ React / Preact

Web 组件

您必须包含每个 Bento 组件所需的 CSS 库，以确保正确加载，然后再添加自定义样式。或者使用内联提供的轻量级预升级样式。请参阅 布局和样式。

通过 npm 导入

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">

示例

<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>

交互性和 API 使用

Bento 组件通过其 API 具有很强的交互性。bento-jwplayer 组件 API 可通过在您的文档中包含以下脚本标签来访问

await customElements.whenDefined('bento-jwplayer');
const jwplayerApi = await document.querySelector('bento-jwplayer').getApi();

您可以使用 API 触发可用操作（play、pause、mute、unmute、requestFullscreen）

<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>

布局和样式

每个 Bento 组件都有一个小型的 CSS 库，您必须包含该库以确保在没有 内容偏移 的情况下正确加载。由于基于顺序的特异性，您必须手动确保在任何自定义样式之前包含样式表。

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-jwplayer-1.0.css"
/>

或者，您还可以使轻量级预升级样式内联可用

<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>

属性

data-player-idJW Platform 播放器 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板的 播放器 部分中找到。（必需）
data-media-idJW Platform 媒体 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板的 内容 部分中找到。（如果未定义 data-playlist-id，则必需。）。注意：outstream 也是一个有效值。
data-playlist-idJW Platform 播放列表 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板的 播放列表 部分中找到。如果同时指定了 data-playlist-id 和 data-media-id，则 data-playlist-id 优先。（如果未定义 data-media-id，则必需。）
data-content-search表示播放列表的类型。如果需要上下文文章匹配，请使用值 `__CONTEXTUAL__`。如果需要搜索播放列表，请输入用于生成搜索播放列表的关键字或短语。
data-content-backfill确保搜索或情境播放列表始终返回结果。如果给定查询没有相关结果，此参数将确保提供热门视频列表。（布尔值，默认值：true）
data-player-querystring将添加到播放器 iframe src 的参数查询字符串。可用于令牌签名等操作。
data-player-param-*将作为查询参数添加到播放器 iframe src 的属性。



键和值将进行 URI 编码。键将采用驼峰式大小写。
  • data-player-param-token="abc" 将变为 &token=abc
  • data-player-param-custom-data="key:value;key2:value2" 将变为 &customData=key%3Avalue%3Bkey2%3Avalue2
使用 data-player-querystring 的替代方法。
data-ad-cust-params要添加到广告标签的自定义参数的 JSON 字符串。
data-ad-cust-params='{
      "key1": "value"
    }'
data-ad-macro-*用于覆盖广告标签中宏的默认值，支持的宏包括
  • domain
  • referrer
  • page-url
  • item-{custparam}
  • item-{custparam}-list
data-ad-macro-domain="jwplayer.com" 将在 __domain__ 宏中替换为 "jwplayer.com"。



请参阅 JW Player 的 广告标签定位宏，了解更多信息。
data-config-plugin-url用于将外部 JS 插件传递给播放器的 URL 字符串。
data-config-skin-url用于将外部 CSS 皮肤传递给播放器的 URL 字符串。请参阅 JW Player 的 CSS 皮肤参考，了解更多信息。
data-config-json播放器配置的 JSON 字符串。可用于在播放器上设置特定的配置属性。
data-config-json='{"playbackRateControls":true,"displaytitle":false}'
广告配置也可以使用此方法指定。
data-config-json='{
      "advertising": {
        "client": "vast",
        "schedule": [
          {
            "tag": "http://adserver.com/vastTag.xml",
            "offset": "pre"
          }
        ]
      }
    }'
媒体和滚动悬浮属性无法使用此属性进行配置。在 JW Player 仪表板中更新媒体属性。请参阅 JW Player 的 播放器配置参考，了解更多信息。
autoplay如果存在此属性，并且浏览器支持自动播放，则视频将在可见后立即自动播放。组件需要满足一些条件才能播放，这些条件在 AMP 规范中的视频中进行了概述。
dock需要 amp-video-docking 扩展。如果存在此属性且视频正在手动播放，则当用户滚动出视频组件的可视区域时，视频将“最小化”并固定在角落或元素上。

有关更多详细信息，请参阅 关于停靠扩展本身的文档。

样式

你可以使用 bento-jwplayer 元素选择器自由设置手风琴样式。

Preact/React 组件

通过 npm 导入

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>
  );
}

布局和样式

容器类型

BentoMathml 组件已定义布局大小类型。为确保组件正确渲染，请务必通过所需的 CSS 布局（例如使用 height、width、aspect-ratio 或其他此类属性定义的布局）将大小应用于组件及其直接子级。这些属性可以内联应用

<BentoMathml style={{width: 300, height: 100}}>...</BentoMathml>

或通过 className 应用

<BentoMathml className="custom-styles">...</BentoMathml>
.custom-styles {
  background-color: red;
  width: '300px';
  height: '100px';
}

属性

playerIdJW Platform 播放器 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板的 播放器 部分中找到。（必需）
mediaIdJW Platform 媒体 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板中的内容部分找到。（如果未定义 playlistId，则必需）。注意：outstream 也是一个有效值。
playlistIdJW Platform 播放列表 ID。这是一个 8 位字母数字序列，可以在 JW Player 仪表板中的播放列表部分找到。如果同时指定了 playlistId 和 mediaId，则 playlist-id 优先。（如果未定义 media-id，则必需）。
contentSearch表示播放列表的类型。如果需要搜索播放列表，请输入用于生成搜索播放列表的关键字或短语。
contentBackfill确保搜索或情境播放列表始终返回结果。如果给定查询没有相关结果，此参数将确保提供热门视频列表。（布尔值，默认值：true）
queryParams应附加到播放器 iframe src 的键和值的对象。这可用于诸如令牌签名之类的操作。键和值将进行 URI 编码。键将采用驼峰式大小写。
  • player-param-token="abc" 变为 &token=abc
  • player-param-custom-data="key:value;key2:value2" 变为 &customData=key%3Avalue%3Bkey2%3Avalue2
adCustParams要添加到广告标签的自定义参数的 JSON 字符串。
adCustParams={JSON.stringify({key1: "value"})}
adMacros用于覆盖广告标签中宏的默认值的一个属性。支持的宏包括
  • domain
  • referrer
  • page-url
  • item-{custparam}
  • item-{custparam}-list
ad-macro-domain="jwplayer.com" 将用 "jwplayer.com" 替换 __domain__ 宏。



请参阅 JW Player 的 广告标签定位宏，了解更多信息。
config用于传递各种配置的项。接受 skinUrl 字符串，用于将外部 CSS 皮肤传递给播放器。有关更多信息，请参阅 JW Player 的 CSS 皮肤参考。接受 pluginUrl 字符串，用于将外部 JS 插件传递给播放器。接受包含播放器配置的 JSON 字符串的 json 属性。这可用于设置播放器上的特定配置属性。还可以使用此方法指定广告配置。 ```javascript 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" } ] } } }} ``` 媒体和浮动滚动属性无法使用此属性进行配置。在 JW Player 仪表板中更新媒体属性。有关更多信息，请参阅 JW Player 的 播放器配置参考。
autoplay如果存在此属性，并且浏览器支持自动播放，则视频将在可见后立即自动播放。组件需要满足一些条件才能播放，这些条件在 AMP 规范中的视频中进行了概述。
dock需要 amp-video-docking 扩展。如果存在此属性且视频正在手动播放，则当用户滚动出视频组件的可视区域时，视频将“最小化”并固定在角落或元素上。

有关更多详细信息，请参阅 关于停靠扩展本身的文档。
我们在本网站上使用 Cookie 来分析流量并优化您的体验。
更多详情