Рамблер/плеер - v1.147.1

Плеер

Плеер предоставляет единый API для встраивания видео на веб-сайты. Вы можете управлять воспроизведением и поведением отдельных модулей, независимо от того, где запущен плеер - в браузере или на мобильном устройстве.

Начало работы

Добавьте следующий код на свою веб-страницу для встраивания видео.

Использование HTML-кода

<div
  data-widget="Player"
  data-id="record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b"></div>
<script async src="https://vp.rambler.ru/player/sdk.js"></script>

Чтобы использовать API плеера, создайте экземпляр плеера для его DOM-узла.

window.RamblerPlayer = window.RamblerPlayer || []
window.RamblerPlayer.push(() => {
  const player = new RamblerPlayer({
    parentId: '[data-id="record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b"]'
  })
  player.on(RamblerPlayer.Events.PLAYER_READY, () => {
    // плеер полностью готов к старту
  })
})

Использование JavaScript-кода

<div id="player"></div>
<script>
  window.RamblerPlayer = window.RamblerPlayer || []
  window.RamblerPlayer.push(() => {
    const player = new RamblerPlayer({
      parentId: '#player',
      id: 'record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b'
    })
    player.on(RamblerPlayer.Events.PLAYER_READY, () => {
      // плеер полностью готов к старту
    })
  })
</script>
<script async src="https://vp.rambler.ru/player/sdk.js"></script>

Оборачивание в статический метод push позволяет инициализировать плеер в любое время, например, перед асинхронной загрузкой скрипта SDK.

Использование AMP-кода

<head>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script
    async
    custom-element="amp-video-iframe"
    src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
  <script
    async
    custom-element="amp-video-docking"
    src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
</head>
<body>
  <p>...</p>
  <amp-video-iframe
    width="640"
    height="360"
    layout="responsive"
    dock
    poster=""
    src="https://vp.rambler.ru/player/embed.html?widget=Player&id=record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b&referrer=https%3A%2F%2Fexample.com">
  </amp-video-iframe>
  <p>...</p>
</body>

⚠️ Плеер в AMP iframe теряет оригинальный URL-адрес страницы встраивания, поэтому следует явно указать закодированный referrer в параметрах плеера.

RSS и Yandex Turbo

<iframe
  width="640"
  height="360"
  allowfullscreen="allowfullscreen"
  frameborder="0"
  src="https://vp.rambler.ru/player/embed.html?widget=Player&id=record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b&referrer=https%3A%2F%2Fexample.com">
</iframe>

⚠️ Плеер в RSS/Turbo iframe теряет оригинальный URL-адрес страницы встраивания, поэтому следует явно указать закодированный referrer в параметрах плеера.

Реклама

Собственные идентификаторы

Плеер поддерживает параметры sspUserId и sspUserIdScope для передачи пользовательских идентификаторов (publisher_uid и publisher_uid_scope) в SSP рекламу.

Использование HTML-кода:

<div
  data-widget="Player"
  data-id="record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b"
  data-ssp-user-id="publisher_uid"
  data-ssp-user-id-scope="publisher_uid_scope"></div>
<script src="https://vp.rambler.ru/player/sdk.js" async></script>

Использование JavaScript-кода:

<div id="player"></div>
<script>
  const player = new RamblerPlayer({
    parentId: '#player',
    id: 'record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b',
    sspUserId: 'publisher_uid',
    sspUserIdScope: 'publisher_uid_scope'
  })
  player.on(RamblerPlayer.Events.PLAYER_READY, () => {
    // плеер полностью готов к старту
  })
</script>
<script src="https://vp.rambler.ru/player/sdk.js" async></script>

Обогащение SSP jparams

Переданные параметры будут объединены с существующими внутренними параметрами.

Использование HTML-кода

Передайте закодированный сериализованный объект с параметрами:

<div
  data-widget="Player"
  data-id="record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b"
  data-ssp-jparams="%7B%22puid6%22%3A1%2C%22puid7%22%3A2%2C%22puid34%22%3A3%7D"></div>
<script src="https://vp.rambler.ru/player/sdk.js" async></script>

Использование JavaScript-кода

Передайте объект с параметрами:

<div id="player"></div>
<script>
  const player = new RamblerPlayer({
    parentId: '#player',
    id: 'record::9afb91a9-999a-9d9a-b9f9-b9f99999d51b',
    sspJparams: {
      puid6: 1,
      puid7: 2,
      puid34: 3
    }
  })
  player.on(RamblerPlayer.Events.PLAYER_READY, () => {
    // плеер полностью готов к старту
  })
</script>
<script src="https://vp.rambler.ru/player/sdk.js" async></script>

Settings

Member Visibility

Theme

On This Page

Плеер