社交插件

嵌入式视频播放器和直播视频播放器

使用嵌入式视频播放器，您可以轻松在自己的网站中添加 Facebook 视频和 Facebook 直播视频。您可以将公共主页或用户发布的公开视频帖子用作视频或直播视频源。

嵌入式视频播放器配置器代码示例设置手动添加代码

分步说明

1.选择网址或公共主页

选择您要嵌入的 Facebook 视频网址。

2.代码配置器

将网址粘贴到代码配置器，然后点击“获取代码”按钮以生成嵌入式视频播放器代码。

3.复制并粘贴 HTML 代码片段

复制代码片段并将其粘贴到目标网站的 HTML 中。

嵌入式视频播放器配置器

视频的 URL
视频像素宽度
获取代码

完整代码示例

复制代码示例并将其粘贴到您的网站。将 data-href 值调整为您的视频网址。使用 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

视频的绝对网址。

n/a

data-allowfullscreen

允许视频在全屏模式下播放。可以是 false 或 true。

false

data-autoplay

页面加载时自动开始播放视频。视频将无声（静音）播放。用户可以通过视频播放器控制选项打开声音。此设置不适用于移动设备。可以是 false 或 true。

false

data-lazy

true 表示您可通过设置 loading="lazy" iframe 属性来使用浏览器的延迟加载机制。其效果是，如果插件不在视区附近，则浏览器不会显示插件，且您可能始终无法看到该插件。可以是 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.获取视频帖子网址

首先，您需要获取要分享的视频帖子的网址。您必须将视频帖子状态设置为“公开”（参阅常见问题）。如果帖子发布时间旁的地球图标为灰色，则表示此帖子已设置为“公开”：

为方便测试，您可以使用该网址示例：

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

2.加载 JavaScript SDK

如要使用嵌入式视频播放器插件或任何其他社交插件，您需要将 Facebook JavaScript 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} 替换为您的帖子网址。

<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.自定义

按照本页面下方的说明调整大小、语言和其他设置。

获取视频帖子的网址

在某些情况中，您的嵌入代码会由 CMS 创建，而您只需要原始帖子的网址。获取帖子的网址有两种方法：

  1. 复制浏览器地址栏中的永久链接网址。
  2. 右键点击帖子的发布时间，然后复制链接地址。

两种方法都在下方截图中以红色突出显示。

通过图谱 API

如果您希望将嵌入式视频播放器自动集成到网站，可以使用图谱 API 来汇总视频。例如，您可以使用公共主页视频 API 端点。在您向 /{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": []
    }
   ]
}

如要获取视频的网址：

使用 id 值，按照下列结构创建网址：

"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 JavaScript SDK 的本地化版本。加载 SDK 时，只需更改 src 的值，即可使用您的语言。可将 en_US 替换为自己的语言，例如代表法语（法国）的 fr_FR：

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

您可能需要调整社交插件的宽度，以适应不同的语言。如需更多信息，请参阅本地化与翻译页面。

WordPress

如果您已在 WordPress 网站上使用 JavaScript 版 Facebook SDK，则只需在帖子中添加 fb-video 标签，即可使用嵌入式视频播放器插件：

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

如果您未使用 JavaScript 版 Facebook SDK，而是通过复制并粘贴代码片段（可从各个视频帖子获取）来嵌入视频，则系统很可能无法显示嵌入式视频播放器插件，因为 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 video 的 embed_html 属性？

不，您不能使用 embed_html 属性。请改用嵌入式视频播放器插件！

关于 embed_html 属性：

图谱 API 端点 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>"
}