Встраиваемый видеоплеер и проигрыватель прямого эфира

Встраиваемый видеоплеер позволяет добавлять на ваш сайт видео и прямые эфиры с Facebook. В качестве источника можно использовать любую общедоступную видеопубликацию, размещенную на Facebook от имени Страницы или человека, или прямой эфир.

Конфигуратор встраиваемого видеоплеера Пример кода Настройки Добавление кода вручную

Пошаговые инструкции

1. Выберите URL или страницу.

Выберите URL видео Facebook, которое нужно встроить.

2. Используйте конфигуратор кода.

Вставьте URL в конфигуратор кода. Нажмите кнопку Получить код, чтобы сгенерировать код встраиваемого видеоплеера.

3. Скопируйте и вставьте фрагмент HTML-кода.

Скопируйте и вставьте фрагмент в HTML-код сайта.

Конфигуратор встраиваемого видеоплеера

URL-адрес видео

Ширина видео в пикселях

Включить публикацию полностью

Получить код

Пример полного кода

Скопируйте и вставьте этот пример кода на свой сайт. В качестве значения параметра data-href укажите URL видео. Чтобы задать размер видеоплеера, используйте атрибут data-width.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

Настройки

В конфигураторе выше доступны не все возможные настройки для встраиваемого видеоплеера. Вы также можете изменить следующие настройки:

Настройка	Описание	По умолчанию
`data-href`	Абсолютный URL видео.	`n/a`
`data-allowfullscreen`	Воспроизведение видео во весь экран. Возможные значения: `false` и `true`.	`false`
`data-autoplay`	Автоматический запуск видео при загрузке страницы. Видео будет воспроизводиться без звука. Включить звук можно с помощью инструментов управления видеоплеером. Эта настройка не относится к мобильным устройствам. Возможные значения: `false` и `true`.	`false`
`data-lazy`	Если задать значение `true`, в браузере будет использоваться механизм отложенной загрузки. Для этого требуется атрибут iframe `loading="lazy"`. При отложенной загрузке браузер отображает плагин, только если тот расположен достаточно близко к окну просмотра и велик шанс, что пользователь его увидит. Возможные значения настройки: `true`, `false` (используется по умолчанию).	`false`
`data-width`	Ширина контейнера видео. Минимальное значение: `220px`.	`auto`
`data-show-text`	Установите значение `true`, чтобы показывать текст связанной с видео публикации на Facebook (если она имеется). Только для сайтов для ПК.	`false`
`data-show-captions`	Установите значение `true`, чтобы по умолчанию показывать подписи (если они имеются). Подписи доступны только на ПК.	`false`

Пример конфигурации

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

Получение кода из видеопубликации

1. Перейдите к видеопубликации.

Если вы публикуете общедоступное видео (см. часто задаваемые вопросы), получить код можно непосредственно из видеопубликации.

В меню параметров выберите пункт Embed Video:

Или же во время просмотра видео в полноэкранном режиме нажмите кнопку Embed Video справа внизу:

Только для Страниц

При публикации общедоступного видео на Странице (см. часто задаваемые вопросы) вы можете получить код прямо из Хроники. Нажмите значок в правом верхнем углу публикации на Facebook.

Выберите в меню пункт Embed Video (только для Страниц):

2. Скопируйте и вставьте код.

Откроется диалог с кодом для встроенной видеопубликации. Скопируйте и вставьте этот код в то место веб-страницы, где вы хотите разместить публикацию.

Подробнее см. в разделе Добавление кода вручную.

Добавление кода вручную

Если вы не хотите использовать генератор кодов, можно вставить код вручную.

1. Получите URL видеопубликации.

Первое, что нужно сделать, — получить URL видеопубликации, которой вы хотите поделиться. Видеопубликация обязательно должна быть общедоступной (см. часто задаваемые вопросы). Такая публикация отмечается значком в виде серой Земли рядом со временем публикации:

Для тестирования можно использовать этот URL:

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. Загрузите SDK для JavaScript.

Чтобы использовать плагин встраиваемого видеоплеера или любой другой социальный плагин, необходимо добавить на сайт Facebook SDK для JavaScript. На каждой нужной странице достаточно разместить по одному скрипту загрузки SDK. Лучше всего сделать это сразу после открывающего тега <body>:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Подробнее о том, как реализовать SDK для JavaScript, см. в руководстве по началу работы с SDK для JavaScript.

3. Разместите тег встраиваемого видеоплеера.

Разместите тег встраиваемого видеоплеера в любом месте своего сайта. Подставьте вместо {your-video-post-url} URL-адрес публикации.

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. Протестируйте вставку.

Выполнив инструкции выше, вы сможете протестировать встраиваемый видеоплеер. Полный код интеграции будет выглядеть примерно так:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

Результат показан на снимке экрана ниже.

5. Настройте отображение.

Следуя инструкциям внизу страницы, можно настроить размер, язык и другие параметры встроенной публикации.

Получение URL видеопубликации

Иногда код вставки создается системой управления контентом. В этом случае вам потребуется только URL публикации. Получить URL публикации можно двумя способами:

Скопировать URL постоянной ссылки из адресной строки браузера.
Щелкнуть правой кнопкой мыши по времени публикации и скопировать адрес ссылки.

На снимке экрана оба варианта подчеркнуты красным.

С помощью API Graph

Хотите автоматически встраивать видеоплееры на свой сайт? В таком случае используйте API Graph, чтобы агрегировать видео. Например, можно использовать конечную точку API Page Videos. Она будет отправлять ответы на ваши запросы к /{page-id}/videos в следующем формате:

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

Получение URL видео

Используя значение id, создайте URL со следующей структурой:

"https://www.facebook.com/video.php?v={id}"

Не используйте для встраивания видео свойство embed_html. Подробнее см. в часто задаваемых вопросах.

Отображение на ПК

Ширину плеера на ПК можно задать с помощью атрибута data-width в теге встраиваемого видеоплеера (см. пример ниже). Минимальное значение: 220. Максимальное значение не ограничено, однако плеер не может быть больше своего родительского элемента.

Не используйте теги стилей CSS для настройки размера плагина. Это может привести к ошибкам отображения.

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

Полноэкранный режим

Если вы хотите, чтобы видео можно было смотреть в полноэкранном режиме, добавьте свойство data-allowfullscreen="true".

Отображение в мобильном браузере

На мобильном устройстве плеер автоматически подстраивается под внутреннюю ширину родительского элемента.

Изменение языка

Чтобы изменить язык плагина встраиваемого видеоплеера, загрузите локализованную версию Facebook SDK для JavaScript. При загрузке SDK задайте для src свою локаль. Замените en_US кодом своего языка, например fr_FR для французского (Франция).

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

Возможно, потребуется изменить ширину социального плагина, чтобы вместить локализованный текст. Подробную информацию см. на странице Локализация и перевод.

WordPress

Если ваш сайт размещен на WordPress и вы уже используете на нем Facebook SDK для JavaScript, для встраивания видеоплеера достаточно добавить в публикацию тег fb-video:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

Если вы не используете Facebook SDK для JavaScript, а видео встраиваете с помощью сниппетов из соответствующих видеопубликаций, то плагин встраиваемого видеоплеера, скорее всего, не будет отображаться. Причина в том, что WordPress преобразует символы & в #038;. Из-за этого видеоплеер не будет работать.

Поэтому добавляйте плагин, используя следующий код:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v3.2'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

В ближайшем будущем выйдет новый, более удобный механизм интеграции с WordPress.

Часто задаваемые вопросы

Можно ли использовать для API Graph `video` свойство `embed_html`?

Нет, свойство embed_html использовать нельзя. Используйте вместо него плагин встраиваемого видеоплеера.

Информация о свойстве `embed_html`

Конечная точка API Graph video обслуживает свойство embed_html. Его значение содержит элемент HTML, который можно встроить в веб-страницу для воспроизведения нужного видео.

Не следует путать это значение с плагином встраиваемого видеоплеера. Мы не рекомендуем использовать это свойство. Используйте вместо него плагин встраиваемого видеоплеера.

Если вы все же воспользуетесь значением свойства embed_html, то:

видеоплеер не будет работать на мобильных устройствах и планшетах;
в видеоплеере не будет отображаться дополнительная информация, например количество просмотров, название видео и т. д.

Пример со свойством `embed_html` (больше не используется):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}