Video & trình phát video trực tiếp được nhúng

Với trình phát video được nhúng, bạn có thể dễ dàng thêm video trên Facebookvideo trực tiếp trên Facebook vào trang web của mình. Bạn có thể sử dụng mọi bài viết video công khai của Trang hoặc của một cá nhân làm nguồn video hoặc video trực tiếp.

Trình định cấu hình trình phát video được nhúngVí dụ về mãCài đặtThêm mã theo cách thủ công

Từng bước

1. Chọn URL hoặc Trang

Chọn URL của video trên Facebook mà bạn muốn nhúng.

2. Bộ cấu hình mã

Dán URL vào Bộ cấu hình mã và nhấp vào nút "Lấy mã" để tạo mã trình phát video được nhúng.

3. Sao chép & dán đoạn mã HTML

Sao chép và dán đoạn mã vào HTML của trang web đích.

Trình định cấu hình trình phát video được nhúng

URL video
Chiều rộng pixel của video

Ví dụ về mã đầy đủ

Sao chép & dán ví dụ về mã vào trang web của bạn. Điều chỉnh giá trị data-href cho URL của video. Kiểm soát kích thước trình phát bằng thuộc tính 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 = "https://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>

Cài đặt

Bộ cấu hình ở trên không bao gồm tất cả các cài đặt có thể cho trình phát video được nhúng. Bạn cũng có thể thay đổi các cài đặt sau:

Cài đặt Mô tả Mặc định

data-href

URL tuyệt đối của video.

n/a

data-allowfullscreen

Cho phép phát video ở chế độ toàn màn hình. Có thể là false hoặc true.

false

data-autoplay

Tự động bắt đầu phát video khi tải trang. Video sẽ được phát mà không có âm thanh (tắt tiếng). Mọi người có thể bật âm thanh qua các nút điều khiển của trình phát video. Cài đặt này không áp dụng cho các thiết bị di động. Có thể là false hoặc true.

false

data-width

Chiều rộng của vùng chứa video. Tối thiểu là 220px.

auto

data-show-text

Đặt thành true để bao gồm văn bản từ bài viết trên Facebook được liên kết với video, nếu có. Chỉ khả dụng với trang web dành cho máy tính.

false

data-show-captions

Đặt thành true để hiển thị phụ đề (nếu có) theo mặc định. Phụ đề chỉ khả dụng trên máy tính.

false

Cấu hình mẫu

<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>

Lấy mã của bạn từ bài viết video

1. Điều hướng đến bài viết video của bạn

Nếu đăng một video công khai (xem Câu hỏi thường gặp), bạn có thể lấy mã nhúng ngay từ chính bài viết video.

Chọn Embed Video từ menu tùy chọn:

Hoặc khi xem video ở chế độ xem toàn trang, chọn nút Embed Video ở dưới cùng bên phải:

Chỉ dành cho Trang

Khi đăng video công khai lên Trang (xem Câu hỏi thường gặp), bạn có thể lấy mã nhúng ngay từ Dòng thời gian. Nhấp vào biểu tượng xuất hiện ở góc trên cùng bên phải của bài viết trên Facebook.

Chọn Embed Video từ menu thả xuống: (Chỉ dành cho Trang)

2. Sao chép và dán mã

Bạn sẽ nhìn thấy một hộp thoại xuất hiện cùng với mã để nhúng bài viết video của mình. Sao chép và dán mã này vào trang web của bạn ở nơi mà bạn muốn bài viết xuất hiện.

Để biết chi tiết về kỹ thuật, vui lòng tham khảo phần Thêm mã theo cách thủ công

Thêm mã theo cách thủ công

Bên cạnh Trình tạo mã, bạn cũng có thể nhúng mã theo cách thủ công.

1. Lấy URL của bài viết video

Trước tiên, bạn cần lấy URL của bài viết video mà bạn muốn chia sẻ. Bài viết có video phải hiển thị công khai (xem Câu hỏi thường gặp), điều này được biểu thị bằng biểu tượng thế giới màu xám, ngay bên cạnh thời gian đăng của bài viết:

Để thử nghiệm, bạn có thể sử dụng URL mẫu sau:

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

2. Tải SDK JavaScript

Để sử dụng plugin Trình phát video được nhúng hoặc bất kỳ plugin xã hội nào khác, bạn cần thêm SDK Facebook dành cho JavaScript vào trang web của mình. Bạn chỉ cần tải SDK một lần trên mỗi trang, lý tưởng là ngay phía sau thẻ <body> mở:

<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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Bạn có thể tìm thêm trợ giúp về cách triển khai SDK JavaScript trong SDK JavaScript - Bắt đầu nhanh.

3. Đặt thẻ Trình phát video được nhúng

Tiếp theo, đặt thẻ Trình phát video được nhúng vào bất kỳ vị trí nào trên trang web của bạn. Thay thế {your-video-post-url} bằng URL của bài viết.

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

4. Thử nghiệm

Sau khi hoàn tất những bước này, bạn có thể thử nghiệm Trình phát video được nhúng của mình. Tích hợp hoàn tất sẽ như sau:

<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 = "https://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>

Kết quả của mẫu thử nghiệm được hiển thị trong ảnh chụp màn hình bên dưới.

5. Tùy chỉnh

Làm theo hướng dẫn ở cuối trang này để điều chỉnh kích thước, ngôn ngữ và các cài đặt khác.

Lấy URL của bài viết video

Có thể có những trường hợp mà mã nhúng của bạn được tạo bởi CMS và bạn chỉ cần URL của bài viết gốc. Có hai cách để lấy URL của bài viết:

  1. Sao chép URL của liên kết vĩnh viễn từ thanh địa chỉ của trình duyệt.
  2. Nhấp chuột phải vào thời gian đăng của bài viết và sao chép địa chỉ liên kết.

Cả hai phương thức đều được đánh dấu bằng màu đỏ trong ảnh chụp màn hình bên dưới.

Thông qua API Đồ thị

Nếu bạn muốn tự động tích hợp các trình phát video được nhúng vào trang web, bạn có thể sử dụng API Đồ thị để tổng hợp các video. Ví dụ: bạn có thể sử dụng điểm cuối API video Trang, điểm cuối này sẽ gửi cho bạn phản hồi về yêu cầu đối với /{page-id}/videos ở định dạng sau (rút gọn):

{
  "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": []
    }
   ]
}

Cách lấy URL của video:

Sử dụng giá trị id để tạo URL theo cấu trúc:

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

Không sử dụng thuộc tính embed_html để nhúng video. Để biết thêm thông tin về chủ đề này, vui lòng tham khảo phần Câu hỏi thường gặp

Bố cục trên máy tính

Bạn có thể điều chỉnh chiều rộng của Trình phát video được nhúng trên máy tính qua thuộc tính data-width trong thẻ Trình phát video được nhúng như trong ví dụ bên dưới. Giá trị phải tối thiểu là 220. Không có giới hạn về giá trị tối đa, nhưng trình phát không bao giờ được lớn hơn thành phần chính.

Không sử dụng thẻ kiểu CSS để điều chỉnh kích thước của plugin. Điều đó có thể gây ra lỗi hiển thị.

<!-- 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>

Toàn màn hình

Bạn có thể thêm thuộc tính data-allowfullscreen="true" để cho phép phát video ở chế độ toàn màn hình.

Bố cục trên web di động

Trên web di động, Trình phát video được nhúng tự động điều chỉnh theo chiều rộng bên trong của thành phần chính.

Thay đổi ngôn ngữ

Bạn có thể thay đổi ngôn ngữ của plugin Trình phát video được nhúng bằng cách tải phiên bản được bản địa hóa của SDK Facebook dành cho JavaScript. Khi bạn tải SDK, hãy thay đổi giá trị của js.src để sử dụng ngôn ngữ của bạn. Thay thế en_US bằng ngôn ngữ của bạn, ví dụ: fr_FR cho tiếng Pháp (Pháp):

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

Các ngôn ngữ được hỗ trợ được tham chiếu trong tệp XML ngôn ngữ Facebook. Bạn có thể cần điều chỉnh chiều rộng của plugin xã hội để sử dụng các ngôn ngữ khác nhau. Bạn có thể tìm thêm thông tin trên trang Bản địa hóa & dịch của chúng tôi.

Wordpress

Nếu bạn hiện đã sử dụng SDK Facebook dành cho JavaScript trong trang web Wordpress, bạn có thể sử dụng plugin Trình phát video được nhúng bằng thao tác đơn giản là thêm thẻ fb-video vào bài viết của mình:

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

Nếu bạn hiện không sử dụng SDK Facebook dành cho JavaScript và nhúng video qua đoạn mã sao chép & dán (đoạn mã mà bạn có thể lấy từ mỗi bài viết video), plugin Trình phát video được nhúng nhiều khả năng sẽ không hiển thị vì Wordpress sẽ chuyển đổi tất cả các ký tự & thành #038; và ngắt trình phát.

Thay vào đó, hãy sử dụng mã sau để thêm plugin:

<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 = "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>

Tích hợp Wordpress mới, dễ dàng sẽ được phát hành trong tương lai gần.

Câu hỏi thường gặp

Tôi có thể sử dụng thuộc tính embed_html cho video API Đồ thị không?

Không, bạn không được sử dụng thuộc tính embed_html. Thay vào đó, hãy sử dụng plugin Trình phát video được nhúng!

Giới thiệu về thuộc tính embed_html:

Điểm cuối API Đồ thị video sẽ phân phối thuộc tính có tên là embed_html. Giá trị của thuộc tính này sẽ chứa thành phần HTML có thể được nhúng vào trang web để phát video yêu cầu.

Không được nhầm lẫn giá trị này với plugin Trình phát video được nhúng. Chúng tôi khuyên bạn không nên sử dụng thuộc tính này nữa - thay vào đó, hãy sử dụng plugin Trình phát video được nhúng!

Nếu bạn sử dụng giá trị của thuộc tính embed_html, trình phát video sẽ:

  • Không hoạt động trên các thiết bị di động và máy tính bảng
  • Không chứa bất kỳ thông tin bổ sung nào như lượt xem, tiêu đề video, v.v.

Ví dụ về thuộc tính embed_html (không dùng nữa):

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