內嵌影片和直播視像播放程式

內嵌影片播放程式讓您可以輕鬆地在網站上加入 Facebook 影片Facebook 直播視像。您的影片或直播視像來源可以是專頁或用戶公開發佈的影片帖子。

內嵌影片播放程式配置工具程式碼範例設定手動加入程式碼

步驟

1.選擇網址或專頁

挑選要內嵌的 Facebook 影片網址。

2.程式碼配置工具

將網址貼至程式碼配置工具,然後點擊「取得程式碼」按鈕,產生您的內嵌影片播放程式程式碼。

3.複製並貼上 HTML 程式碼片段

複製該程式碼片段,然後貼至目標網站的 HTML。

內嵌影片播放程式配置工具

影片的網址
影片的像素寬度

完整程式碼範例

複製該程式碼範例,然後貼至您的網站。將 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

若與影片關聯的 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。您只需在網頁上載入該 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. 在帖子的發佈時間上按滑鼠右鍵,然後複製連結位址。

以下螢幕截圖將這兩種方式以紅色標示。

透過 Graph API

如果您想在網站中自動整合內嵌影片播放程式,大概會使用 Graph 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 後,調整 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 網站已使用 Facebook JavaScript SDK,則只需在帖子中加入 fb-video 標籤,便可使用「內嵌影片播放程式」附加程式:

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

如果您未使用 Facebook JavaScript 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。

常見問題

是否可使用 Graph API videoembed_html 屬性?

否,您不應使用 embed_html 屬性。請改為使用「內嵌影片播放程式」附加程式!

關於 embed_html 屬性:

Graph 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>"
}