Trình phát video trực tiếp và video đượ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 Facebook và video 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 có 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.

Bộ cấu hình trình phát video được nhúng Mã mẫu Cài đặt Thêm mã theo cách thủ công

Hướng dẫn 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.

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

URL video

Chiều rộng pixel của video

Bao gồm toàn bộ bài viết

Lấy mã

Mã mẫu đầy đủ

Sao chép và dán mã mẫu 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 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>

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-lazy`	Nếu bạn đặt thông số này thành `true`, hệ thống sẽ sử dụng cơ chế tải từng phần của trình duyệt bằng cách đặt thuộc tính `loading="lazy"` cho iframe. Khi đó, trình duyệt sẽ không hiển thị plugin nếu plugin này ở xa vùng hiển thị và có thể không bao giờ xuất hiện. Có thể có giá trị là `true` hoặc `false` (mặc định).	`false`
`data-width`	Chiều rộng của vùng chứa video. Tối thiểu `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ỉ dùng được cho trang web dành cho máy tính.	`false`
`data-show-captions`	Đặt thành `true` để hiển thị chú thích (nếu có) theo mặc định. Chú thích chỉ dùng được 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 có video

1. Điều hướng đến bài viết có 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 có video.

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

Hoặc khi xem video ở chế độ xem toàn trang, hãy 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. Hãy 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 có 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

Ngoài 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 có video

Trước tiên, bạn cần lấy URL của bài viết có 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 JavaScript SDK

Để 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 Facebook JavaScript SDK 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 sau thẻ mở đầu <body>:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Bạn có thể xem JavaScript SDK – Bắt đầu nhanh để hiểu rõ hơn về cách triển khai JavaScript SDK.

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 vị trí bất kỳ 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. Một tiện ích tích hợp hoàn chỉnh sẽ có dạng như sau:

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

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

5. Tùy chỉnh

Hãy 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 có video

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

Sao chép URL của liên kết vĩnh viễn từ thanh địa chỉ của trình duyệt.
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 đỏ trong ảnh chụp màn hình bên dưới.

Thông qua API Đồ thị

Nếu 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 trên 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 Facebook JavaScript SDK. Khi bạn tải SDK, hãy thay đổi giá trị của src để sử dụng ngôn ngữ của bạn. Hãy thay thế en_US bằng ngôn ngữ của bạn, ví dụ: fr_FR cho tiếng Pháp (Pháp):

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

Bạn có thể phải đ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 và dịch thuật của chúng tôi.

Wordpress

Nếu đã sử dụng Facebook SDK dành cho Javascript trong trang web Wordpress, bạn có thể 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 Facebook SDK 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 có 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à làm hỏng 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    : '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>

Một tiện ích 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. Bạn không nên sử dụng thuộc tính này nữa. Thay vào đó, hãy 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>"
}