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

คุณสามารถเพิ่ม วิดีโอ 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 = "//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 = "//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 = "//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 = "//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 = "//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>"
}