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

使用嵌入式视频播放器,您可以轻松地向自己的网站添加 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>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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

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

false

data-autoplay

页面载入时自动开始播放视频。视频将无声(静音)播放。用户可以通过视频播放器控件打开声音。该设置不适用于移动设备。可以是 falsetrue

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.获取视频帖子网址

首先,您需要获取要分享的视频帖子的网址。视频帖子的隐私设置必须为公开(参阅常见问题),这通过帖子发布时间旁边的灰色地球图标指示:

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

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

2.加载 JavaScript SDK

要使用嵌入式视频播放器插件或其他社交插件,您需要将 JavaScript 版 Facebook SDK 添加到网站中。您只需在页面中加载一次 SDK,最好是在 <body> 开始标签后加载:

<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</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>(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 = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</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" 以允许视频全屏播放。

移动网页布局

在移动网,嵌入式视频播放器会自动缩放至它的父元素的内部宽度。

调整语言

您可以通过加载 JavaScript 版 Facebook SDK 的本地化版本,调整嵌入式视频播放器插件的语言。加载 SDK 时,调整 js.src 值即可更改语言: 将 en_US 替换为需要的语言代码,例如代表法语(法国)的 fr_FR

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

受支持的语言请参考 Facebook 语言 XML 文件。 您可能需要调整社交插件的宽度,适应不同的语种。请查看本地化与翻译页面查找更多信息。

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    : 'v2.5'
  });
  }; (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 = "//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>"
}