Встроенный видеоплеер и проигрыватель видеотрансляций

Встраиваемый видеоплеер позволяет добавлять видео и прямые трансляции с 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

Чтобы показывать текст связанной с видео публикации на Facebook (если она имеется), установите значение true. Доступно только для сайтов для ПК.

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. Загрузите JavaScript SDK

Чтобы использовать плагин встраиваемого видеоплеера или любой другой социальный плагин, необходимо добавить на сайт 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>

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

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 видеопубликации

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

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

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

Использование 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&version=v3.2"

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

Wordpress

Если ваш сайт размещен на WordPress и вы уже используете на нем Facebook SDK for 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 for 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>"
}