วิดีโอและโปรแกรมเล่นวิดีโอแพร่ภาพสดแบบฝัง

คุณสามารถเพิ่ม วิดีโอ Facebook และ วิดีโอแพร่ภาพสด Facebook ไปยังเว็บไซต์ของคุณได้อย่างง่ายดายด้วยโปรแกรมเล่นวิดีโอแบบฝัง คุณสามารถใช้โพสต์วิดีโอสาธารณะของเพจหรือบุคคลใดๆ เป็นแหล่งที่มาของวิดีโอหรือวิดีโอแพร่ภาพสด

ตัวกำหนดค่าโปรแกรมเล่นวิดีโอแบบฝังตัวอย่างรหัสการตั้งค่าเพิ่มโค้ดด้วยตนเอง

วิธีทำ

1. เลือก URL หรือเพจ

เลือก URL หรือวิดีโอ Facebook ที่คุณต้องการฝัง

2. ตัวกำหนดค่าโค้ด

วาง URL ที่ ตัวกำหนดค่าโค้ด และคลิกที่ปุ่ม “รับโค้ด” เพื่อสร้างโค้ดของโปรแกรมเล่นวิดีโอแบบฝังของคุณ

3. คัดลอกแล้ววางส่วนย่อย HTML

คัดลอกและวางส่วนย่อยลงใน HTML ของเว็บไซต์ปลายทาง

ตัวกำหนดค่าโปรแกรมเล่นวิดีโอแบบฝัง

URL ของวิดีโอ
ความกว้างของวิดีโอในหน่วยพิกเซล
[?]

ตัวอย่างโค้ดแบบเต็ม

คัดลอกแล้ววางตัวอย่างโค้ดลงในเว็บไซต์ของคุณ ปรับเปลี่ยนค่า data-href ให้กับ URL วิดีโอของคุณ ควบคุมขนาดของโปรแกรมเล่นโดยใช้แอตทริบิวต์ 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>

การตั้งค่า

ตัวกำหนดค่าข้างต้นไม่ได้รวมการตั้งค่าที่สามารถทำได้ทั้งหมดของโปรแกรมเล่นวิดีโอแบบฝัง คุณยังสามารถเปลี่ยนการตั้งค่าดังต่อไปนี้ได้อีกด้วย

การตั้งค่า คำอธิบาย ค่าเริ่มต้น

data-href

URL สัมบูรณ์ของวิดีโอ

n/a

data-allowfullscreen

อนุญาตให้วิดีโอเล่นในโหมดเต็มหน้าจอ อาจเป็น false หรือ true

false

data-autoplay

เริ่มเล่นวิดีโอโดยอัตโนมัติเมื่อเพจโหลด วิดีโอจะเล่น โดยไม่มีเสียง (ปิดเสียง) ผู้ใช้สามารถเปิดเสียงผ่านการควบคุมโปรแกรมเล่นวิดีโอ การตั้งค่านี้ไม่สามารถใช้กับอุปกรณ์เคลื่อนที่ อาจเป็น false หรือ true

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. รับ URL ของโพสต์วิดีโอ

ก่อนอื่น คุณต้อง รับ URL ของโพสต์วิดีโอ ที่คุณต้องการแชร์ โพสต์วิดีโอต้องเป็นสาธารณะ (ดูที่ คำถามที่พบบ่อย) โดยจะถูกระบุด้วยไอคอนรูปโลกสีเทาซึ่งอยู่ติดกับเวลาที่เผยแพร่ของโพสต์:

สำหรับการทดสอบ คุณสามารถใช้ URL ตัวอย่างนี้ได้:

"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 = "https://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} ด้วย 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 = "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>

มีการแสดงผลลัพธ์ของตัวอย่างการทดสอบของเราไว้ในภาพหน้าจอข้างล่างนี้

5. การกำหนดเอง

ปฏิบัติตามคำแนะนำข้างล่างที่จะได้เห็นต่อไปในหน้านี้เพื่อปรับเปลี่ยนขนาด ภาษา และการตั้งค่าอื่นๆ

การรับ URL ของโพสต์วิดีโอ

อาจมีสถานการณ์ที่โค้ดในการฝังของคุณได้รับการสร้างขึ้นโดย CMS และคุณต้องการเพียงแค่ URL ของโพสต์ที่เป็นข้อมูลดิบ การขอรับ URL ของโพสต์สามารถทำได้สองวิธี:

  1. คัดลอก URL ของลิงก์ถาวรจากแถบที่อยู่ในเบราว์เซอร์ของคุณ
  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": []
    }
   ]
}

หากต้องการรับ URL ของวิดีโอ:

ใช้ค่า id ในการสร้าง URL ที่ต่อจากโครงสร้าง

"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 = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

รูปแบบภาษาที่รองรับจะมีการอ้างอิงถึงในไฟล์ XML รูปแบบภาษาของ Facebook คุณอาจจำเป็นต้องปรับความกว้างของโซเชียลปลั๊กอินเพื่อให้รองรับภาษาต่างๆ คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่เพจ “การแปลเป็นภาษาท้องถิ่นและการแปลภาษา” ของเรา

Wordpress:

หากคุณกำลังใช้ Facebook SDK สำหรับ JavaScript อยู่แล้วในไซต์ Wordpress ของคุณ คุณสามารถใช้ปลั๊กอินโปรแกรมเล่นวิดีโอแบบฝังโดยเพียงแค่เพิ่มแท็ก fb-video ลงในโพสต์ของคุณ

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

หากคุณไม่ได้ใช้ Facebook SDK สำหรับ JavaScript และฝังวิดีโอผ่านส่วนย่อยคัดลอกและวางซึ่งคุณสามารถได้มาจากแต่ละโพสต์วิดีโอ ปลั๊กอินโปรแกรมเล่นวิดีโอแบบฝังมักจะไม่เรนเดอร์ในขณะที่ 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 = "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>"
}